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!
Hello Natalie, Thanks for great tutorial.
I just wondering, can I include all of Google Fonts to my theme?
if yes, should I include wp_register_style() function one by one until all Google Fonts are included into my theme?
Thank You 🙂
I think that what you mean you want to do is provide a dropdown or checkboxes where your theme’s users can select which font or fonts they’d like to use from all of Google’s fonts. That’s an entirely different proposition from what I’ve detailed here. You might want to take a peek at the code behind some of the Google Fonts WordPress plugins to see how they’re providing that option.
Thanks but I was hoping for something like U-Design offers, that you can choose any font from google fonts. Would I have to put each font in the select option and put conditions like if this font is selected add this stylesheet and this font and all that? Or is there a quick way around.
That’s a totally different proposition from what I’ve outlined here. Your best bet for figuring that out is to take a peek at the code behind some of the Google Fonts WordPress plugins – this is just what they do.
Answering my own question. I found this in the comments of a wpbeginner article,
/*———————————-*/
/* Load CSS Files
/*———————————-*/
if(!function_exists(‘load_theme_styles’))
{
function load_theme_styles()
{
if (!is_admin()) {
$cssURL = get_template_directory_uri().’/css/’;
$fontURL = ‘http://fonts.googleapis.com/css?family=Lora|Oswald’;
// Registering New Styles
wp_register_style(‘googleFont’, $fontURL);
wp_register_style(‘style’, $cssURL.’/style.css’, ‘googleFont’, ‘1.0’, ‘screen’);
wp_register_style(‘print’, $cssURL.’/print.css’, ‘googleFont’, ‘1.0’, ‘print’);
// Enqueing Styles
wp_enqueue_style(‘googleFont’);
wp_enqueue_style(‘style’);
wp_enqueue_style(‘print’);
}
}
}
add_action(‘wp_enqueue_style’, ‘load_theme_styles’);
Which with some modification, I’m sure it’s pretty easy to make the font options part.
But I still have a feeling you would have to add each font and its URL to the options area. (Unless theres a quicker way to do it.)
Hi Natalie,
I added a Google font to my theme by following your post and thought I’d say thankyou 😉
You’re welcome!
Super helpful! Thanks!
Thanks! Good job 🙂
Hi Natalie,
Sorry I’m a bit of a beginner at this. I could follow your instructions up until the moment when we put “function ggl_load_styles() {” into our functions.php file. I’ve found that file, but where in the file do I insert this? Right at the top? Hope you can help,
Esther
As long as you’re not putting this in the middle of some function, you can place it anywhere in your functions.php file. At the very bottom would be the safest bet if you’re not terribly well versed in PHP.
Thank you this is awesome! Worked perfectly and I love how you EXPLAINED everything vs. just giving code (although code was extremely helpful). Thanks Geek Girl!
I’m so glad it was helpful to you. Thank you for taking the time to let me know.
Thank you Natalie! This is exactly what I needed regarding Google Fonts. So many other lesser solutions out there. :/
A clearly-written, informative and relevant article. Thanks for posting, Natalie – you’ve solved my “WTF do I replace Typekit with?” question today. 🙂
I created a custom theme for WordPress on my local server. After uploading everything to the web server, the text is huge! I’m only having this problem in Safari and Firefox. Google Chrome displays my stylesheet properly. I’m just having issues with the font size and not the layout.
Any idea why this happens?
When you view your local site in Safari and Firefox are your fonts huge too? My best guess would be that you’re using either rem’s or em’s to size your text and your Firefox and Safari have a different default font size set than your Chrome.
Thank you so much for this fellow Natalie! These really clear instructions were so helpful for me. Much appreciated!
Natalie
hi. this was great. simple, informative and to the point. I wish it was always this easy to find good information! =)
I have a question following up your tutorial.
Let’s say there is something wrong with google fonts. Is there a way to have a fallback font? maybe even a local copy of that font?
Something like first check font X from google fonts. If, for some reason, it doesn’t work, then load font X from server.
What do you think?
=)
That functionality is already built into CSS. You could simply attach a locally-hosted copy of your webfonts to your stylesheet using the @font-face declaration. You’d want to be careful to name the local file something different. Then you’d just use a CSS font stack – list the Google font first, your locally hosted font file next, and then the list of fonts you’d like that to fall back to in the event that neither of the fonts loads or that site visitor happens to be using a browser that doesn’t support webfonts.
A very good tutorial, I’d like to know what do if you want to add 20 fonts from goole?
How do I use the function in the tutorial? Thanks for the reply.
It’s not a very good idea to use 20 different fonts in one theme – the impact on your page load speed would be huge and the site would be sluggish and slow. If instead, you want to provide 20 Google Fonts as an option in your theme and your theme’s users could choose one, that’s a different issue altogether. Please download and take a look at some of the Google Fonts plugins that encapsulate this functionality to understand how they’re accomplishing that. They are not loading all 20 fonts – just the one that has been selected.
I picked out two fonts, but now I’m confused on how to open my theme’s function file. (I’m such a beginner)
These aren’t edits that should be made from within the WordPress admin area. If you’re not a coder who’s creating either a custom theme or a child theme and you want to use Google Fonts on your site, then I recommend taking a look at one of the plugins for using Google fonts. You might take a look at WP Google Fonts for example.
Thank you!!! Your crystal clear instructions worked perfectly. I’m gaining courage to delve into customizing my own child themes.
Like last 4 days; i am trying to add Google Fonts which compatible with Turkish characters to my site but i couldn’t add it.
Finally got here and finally figure out!
Thank you.
hi natalie,
great tutorial.
works all well and way more elegantly than the usual google include via import or put in header way. I like your page and posts very much and thought i drop a line to let you know.
jordana
So I added this to my child theme functions.php:
// Loads Google fonts
function ggl_load_styles() {
if (!is_admin()) {
wp_register_style(‘http://fonts.googleapis.com/css?family=Signika:400,300,600,700’);
wp_enqueue_style(‘ggl’, get_stylesheet_uri(), array(‘googleFont’) );
}
}
add_action(‘wp_enqueue_scripts’, ‘ggl_load_styles’);
But on my site I’m getting an error:
Warning: Missing argument 2 for wp_register_style(), called in [urlremoved]/wp-content/themes/gimnasio-child/functions.php on line 49 and defined in [urlremoved]/public_html/wp-includes/functions.wp-styles.php on line 103
Any idea why?
Wait, I’m an idiot. No sooner had I clicked post comment I noticed I missed ‘googleFont’, from the helper function.
Works fine now, frustrating this wasn’t included in the theme in the first place but managed to fix it with your great article – thanks.
Damn!!!!! I love you, it works for me
Hi! Thank you so much! It worked for me. I also want to say that you provided the clearest, most well explained step-by-step instructions on this.
Also a note for some others reading who might be new. I created a child theme and none of the custom css changes I made were coming through, so at first I was really disappointed because I thought this wasn’t working for me. However it turns out my style.css and functions.php file were being cached. After disabling the caching everything worked peachy.
So thank you very much once again!!! I spent way too many hours on this lol 😛
I am new in WordPress. Hi, is there no other way one can change the font size and family for all posts without doing do individually using any CSS code?
Hello Mazino – most of the time you will need to write CSS to make changes to the font size and font family for all posts. Sometimes you may find a theme that provides you settings for changing those things.