Of course there are plugins for using Google Web Fonts on your WordPress site, but if you’re developing a theme, chances are you’d like your typography choices to be tied to your theme, not dependent on a plugin. Here’s how to use Google Web Fonts in your theme.
First, head over to Google’s Web Fonts site and pick out the fonts you’d like to use. Use the tools on the left side to narrow down the options because there are a lot. For this blog, I knew I wanted a chunky serif font for the headers and blog title, so I picked serif from the Categories dropdown and then moved the thickness slider over to the right.
That handily narrowed down 617 choices to just 5. You’ve got quite a few options for previewing the fonts – you can view a word, a sentence, a paragraph, or a poster. You can choose from some pre-selected preview text or you can type in your own, and you can also select a font size.
Once you’ve found a font you’d like to use, just click the Add to Collection button.
Yes, you could add dozens of fonts to your collection. But you won’t, right? Because you know that just because you can, doesn’t mean you should. Try to limit yourself to a maximum of three. Two is better. For performance reasons, I still like to use an old-fashioned web-safe font for body text and save the web fonts for headers and other elements that need special emphasis or attention. Be careful about the legibility of your fonts – there’s no use using some snazzy font if it means your site visitors can’t read what you’re writing.
As you add fonts to your collection, you’ll see them listed in the blue section at the bottom. Once you’ve got the fonts in your collection you’d like to use, just click the Use button.
And you’ll be whisked off to a screen with 4-step instructions on how to use the fonts. If you’d like to download your choices to use in a graphics editing program to produce a comp or maybe a fancy screenshot.png for your theme, you can do that by clicking the Download Fonts button at the top right. If you just want to use your font in your theme, then you don’t have to download your collection.
In step one, you can select which weights or styles you want include in your collection and in step two, you can select which character sets you want to include. You can also see the impact your font collection will have on your page speed.
Now, in step three is where things get tricky. Step three gives us code to add to our websites – three different options. Go ahead and select the Standard option, but we’re going to deviate from Google’s instructions a bit at this point to follow WordPress best practices for adding styles to our WordPress theme. In the code for the standard option, just copy the URL that’s listed as the href attribute for the <link> tag.
Then, open up your theme’s functions.php file. We’ll create a function for loading the CSS that we’ll be using with our theme:
See that ggl prefix on my function? That’s a WordPress best practice. Always prefix your WordPress function names to reduce the chances that they’ll collide with some other function in a theme, child theme, or plugin.
Now, inside that function, we want to register our stylesheet from Google:
We’ll use the wp_register_style WordPress helper function. The first parameter is a handle, or shorthand, that we can use to refer to this stylesheet later on in our code. The second parameter is the path to the file. We’re using the URL we got from Step 3 in Google’s instructions.
Next up, we’ll enqueue our main stylesheet for our theme. You didn’t put a <link> tag in the <head> section of your header.php file, did you? If you did, go and remove it. Then enqueue your stylesheet in your functions.php file:
Here we’re using the wp_enqueue_style WordPress helper function. It’s got the same parameters as wp_register_style. First we assign our stylesheet a handle. Second, we get the path to our stylesheet. Handily, WordPress provides us with a function, get_stylesheet_uri(), that we can use to get the path to our theme’s style.css file. Third, we list dependencies. Our style.css file is dependent on the Google Web Fonts stylesheet, so we pass in the handle we assigned to that stylesheet when we registered it.
Finally, we’re going to use the wp_enqueue_scripts action hook to call our function:
Now we’re all done with functions.php and there’s only one thing left to do to use our Google Web Font. Step four of Google’s instructions for using the web font will show you what values you’ll pass to the font-family property to use your font. I want to set all of my headers in Holtwood One SC:
And I want to set my site description in Rouge Script:
That’s all there is to adding Google Web Fonts to your WordPress theme. Remember, with great power comes great responsibility. Use them responsibly!
