STEP ONE
Visit Google Fonts and Choose your Custom Font
Adding custom fonts to WordPress is probably a lot less scary than you think…and it doesn’t require a plugin or any coding knowledge.
To get started, visit http://www.google.com/fonts/
Browse the site for your favorite fonts by using various filters for font categories, thickness, slant and width. Enter your own custom text to see how your blog title or headings might look. You can even search for popular or trending fonts. My advice is to pick a font that isn’t too overused or outdated. It’s also important to choose fonts that are clean and easy to read. Get creative, but don’t go overboard.
Once you’ve selected the font(s) that you want to add to your blog, simply click on the quick-use button (highlighted in green above). This will bring you to the following page, where you can choose your font styles. I recommend choosing one regular and one bold font. You can select others if you like, just be careful to watch the impact on your page load time on the right (highlighted in the green box below). Remember, less is more.
Once you’ve chosen your styles, scroll down to view the grab code for your blog. Click the “@import” tab to view the code you’ll need to add to your theme’s CSS Stylesheet.
STEP TWO
Add Google Fonts to WordPress Theme Stylesheet
For an easier way to add Google Fonts to your WordPress site, scroll down to learn about Jetpack Custom CSS.
Grab the @import code and head over to your WordPress blog. You’ll need to go to “Appearance” → “Editor” and add the @import code to the very top of your themes “style.css” file. Like this:
Always remember to backup your theme files before making changes. I will sometimes save a copy to Google Docs for easy cut and paste if I need it.
Next, you’ll need to go through your theme’s style.css file in order to locate the text that you want to customize. Typically, it’s the body font and headings.
Here’s an example of what the css may look like:
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.8rem;
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
line-height: 1.2;
}
You can hit CTRL + F on your keyboard to open a pop-up search for in your browser. This will allow you to search your css file for the correct text. Look for the following terms: “body” and “h1″. If you are interested in changing more of your theme’s fonts, you can also search “font-family” and replace all the font settings throughout the file.
When in doubt, you can always right click on the text on your blog and select “inspect element” to see the exact string of css that needs changing.
Once you’re done, click “Update File” or “Save” to keep the changes you just made. And don’t forget to backup your files first.
AN EASIER WAY
Add Google Fonts with Jetpack Custom CSS
Here’s an easy way to add Google Fonts to WordPress without the stress of touching your theme’s CSS files. If you have the Jetpack by WordPress.com plugin installed on your blog, simply install the plugin, activate it and go to the “Jetpack” tab in your dashboard menu on the left. Click on “Settings”. If you don’t have the plugin yet, you can search it in your plugins dashboard.
Once the Jetpack plugin has been installed, you should see a new option under your dashboard menu. Click “Appearance” → “Edit CSS” to access your the Jetpack CSS Stylesheet Editor. This stylesheet will allow you to add custom css overtop of your theme’s current css stylesheet.
This way, you won’t have to edit your theme’s stylesheet or risk causing errors to the code. You’ll also notice that all of your previous revisions will be saved so you can easily revert your design if you make a mistake.
Once you’ve added your @import fonts, you’ll also need to integrate your new fonts into your css stylesheet. You can do this by adding the font-family, font-weight and other information to your css stylesheet. Typically, you’ll need to change your body font and headings, although there may be other sections of fonts you’ll want to customize as well.
Hover on the codes below and click “view source” to grab the code.
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.8rem;
font-size: 18px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
line-height: 1.2;
}
You can hit CTRL + F on your keyboard to open a pop-up search for in your browser. This will allow you to search your css file for the correct text. Look for the following terms: “body” and “h1″. If you are interested in changing more of your theme’s fonts, you can also search “font-family” and replace all the font settings throughout the file.
When in doubt, you can always right click on the text on your blog and select “inspect element” to see the exact string of css that needs changing.
Next, just add them to your Jetpack CSS stylesheet and customize as needed for the font family, font weight, font size and line height. You can even add a custom color by inserting “color: #06A4B8″. Just use the hex or RGB code that you prefer.
And that’s it.