How to add Google Fonts to your WordPress Blog

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.

RELATED: HOW TO SETUP PINTEREST RICH PINS

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.

Want an easier way? Try this…

RELATED: The Easiest Way to Add Google Fonts to WordPress