• Home  / 
  • WordPress
  •  /  Using Google Web Fonts with WordPress, the Right Way

Using Google Web Fonts with WordPress, the Right Way

I posted a few weeks ago about how Google Web Fonts has been vastly improved, making it really easy to use non-standard fonts on your websites.

Today I’m going to show you how to use Google Web Fonts on your WordPress site.

You may be thinking “Google provide clear instructions on how to embed their fonts, I don’t need you to tell me.” Well, yes they do. But there’s a much better way to do it, using the wp_enqueue_style function.

Once you’ve chosen your font, and any additional styles and character sets, Google provides you with a <link> tag which you are told to add to the <head> section of your page.

Adding Google Web Fonts

Google provides the code that goes in your <head> section

That’s fine. This is the correct code, and if you want to, you can simply open your header.php template and paste this code in directly.

Think of the Children

The reason this is not best practice when using WordPress has to do with child themes.

If you build a child theme, it inherits all of its theme templates from the parent theme, unless you give it its own copy of a particular template. So if you copy your parent theme’s header.php into your child theme, so that you can add the Google Web Fonts code to it, then any changes made to the parent theme’s header.php will no longer be applied to your child theme.

So what we want to do is insert the code dynamically into the header, so that we don’t need to edit the header.php template at all. We do this in functions.php

The difference here is that in a child theme, functions.php doesn’t override the parent functions, it runs in addition to them. So any functions in your child theme will be run after all the functions in the parent theme have been run.

So, to dynamically insert the Google Web Fonts code into the header, we use the wp_enqueue_style function, because the code Google gives us is a stylesheet declaration.

    function load_fonts() {
            wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Rock+Salt|Neucha');
            wp_enqueue_style( 'googleFonts');
    add_action('wp_print_styles', 'load_fonts');

We create a function, load_fonts, which registers the stylesheet declaration under the name ‘googleFonts’, using the URL provided by Google. It then enqueues the style ready to spit it out into the header. The add_action part does the actual spitting.

Now the code that Google gave us will be automatically included in your header, and your child theme will still inherit the parent’s header.php

It’s good practice to add any additional stylesheets to your theme in this way, and the same goes for scripts, which can be added in a similar way using the wp_enqueue_script function.

Using these methods will keep your themes portable and plugin-friendly.

About the author

Dan Johnson

Dan used to be a WordPress developer at WDFS, but now he has gone off to pursue his passion for art, and he blogs about making a living from creativity at Right Brain Rockstar

Lisa - 4 years ago

Thank you. Seriously. Thank you.

Jay - 4 years ago

I don’t really understand the point of Google Fonts, or at least this idea that it makes web design easier/better. Aren’t you still at the mercy of the fonts of all of your prospective visitors? For example, i just started the design of a new WordPress blog on my Mac. WHen i went to take a look at it on the PCs in our house (on Google Chrome, IE and Firefox), i saw Font replacement everywhere. The WP Theme hypes that it uses Google Fonts. But i don’t really get how that is of any value to me if i’m going to run into the same issues that designers have always had….the fonts on OTHER computers!

    Ben Hunt - 4 years ago

    You can now put the font files on your web server, and browsers can call in the font file dynamically, so you are not relying on the visitor’s having that font installed on their client.

Alyeska - 4 years ago

So, if I need to embed multiple fonts from both Google and Font Squirrel….what would that code look like in WordPress?

I admit I’m confused by the ‘googleFonts’ part — why exactly is that part of the code? If I had a second wp_register_style line, would I need to replace ‘googleFonts’ with something like googleFonts2 and call it seperately with wp_enqueue_style?

Yep, I’m confused.


    Dan Johnson - 4 years ago

    Yes, I believe if you wanted to add a second stylesheet, you would add another wp_register_style line and another wp_enqueue_style line, using a different name, as you suggested.

    I may be wrong though, probably worth checking the Codex.

Rick - 4 years ago

I just started using Google Web fonts on my professional blog. What’s the advantage to doing this, or simply putting the header.php file in my child theme folder and calling it from there? Maybe there’s something I’m missing, but that solution has seemed to work for me so far.

Mike - 4 years ago

By using wp_register_style and wp_enqueue_style, you’re queuing up the file to be brought in during the call to wp_head. Most WordPress themes include the declaration for the style.css before the call to wp_head. Using this method, you would need to move your call for the theme stylesheet below the call to wp_head.

    Mike - 4 years ago

    On second thought, no it doesn’t. When I attempted this on my site, it wasn’t working as expected, but it was due to incorrect usage of the font family name. Please disregard previous comment :)

Luke - 4 years ago


Hope you don’t mind me asking a cheeky unrelated question.

You code box with the ‘select all’ button. Is that a plugin or something you developed yourself? I am using ‘WP SyntaxHighlighter’, but what you have there is way more cool!


Paula Tiller - 4 years ago

Hi, I tried this method of adding google fonts but it led to a blank white screen on trying to access wp-admin.

Any ideas of where I went wrong. I created a new blank functions.php file in my child theme and added the code to that file. I am new to child themes so could be misunderstanding something quite basic.

    Dan - 4 years ago

    Hi Paula

    It’s hard to say what’s gone wrong, it could just be the setup of your child theme. Have you double checked that everything is in place for that?

McKenzie - 3 years ago

Thank you!! I am brand new to google webfonts and I saw there were plenty of WP plugins for this but I didn’t want to install another plugin! Thanks!

Barry Kafka - 3 years ago

Perfect tip, thank you Dan. I prefer adding a few lines of code to functions.php over using a plugin whenever possible.

Joan - 3 years ago

This looks like a very goot workflow for google fonts. I’d love to try this, but the Theme I’m trying out (Neo_Sapien v06) doesn’t seem to have a functions.php.
I’m looking in the “Edit Themes” page, and viewing the list of templates. I find the functions.php there in other themes, but Is there another place I might look for the file; another place I can logically place the function; OR a way I can create the functions.php file for this or other themes?

    Ben Hunt - 3 years ago

    Hi Joan. If you don’t see functions.php under Appearance > Editor, it may mean you’re using a child theme that doesn’t have that file set.

    If you create one with only the new functions you need, and upload it via FTP into your theme folder, it should work.

Loe Spee - 3 years ago

You should use the wp_enqueue_scripts hook to add the Google Web Fonts style sheet instead of the wp_print_styles hook.

Although the hook name might be confusing due to the ‘scripts’ part, it is actually suitable for enqueuing style sheets.

See this post by one of the WordPress developers: http://wpdevel.wordpress.com/2011/12/12/use-wp_enqueue_scripts-not-wp_print_styles-to-enqueue-scripts-and-styles-for-the-frontend/

Scott Whittle - 3 years ago


Thanks for this tut. It really helped me as I was working on a new site for my church – http://www.joycenter.org. We have not launched it yet.

I have one suggestion to improve this article just explain how you can add two fonts to the code for the functions page. I had to figure this out. Although it’s not hard it could be complicating to a newbie.

Thanks again…

    ibnumalik - 3 years ago

    so, how did you add two fonts?Like this?

    function load_fonts() {
    wp_register_style(‘googleFonts’, ‘http://fonts.googleapis.com/css?family=Rock+Salt|Neucha’);
    wp_register_style(‘googleFonts’, ‘http://fonts.googleapis.com/css?family=Droid+Sans’);
    wp_enqueue_style( ‘googleFonts’);

    add_action(‘wp_print_styles’, ‘load_fonts’);

Josh Lobe - 3 years ago

Hello there, and yes this is the best way to include the call to a google webfont. However, if you want to make the font visible in both the front-end and the back-end of your website, and also to be available in the font-selection dropdown… you need something a little more powerful.

Might I suggest a premium plugin which does all of this? It’s Google Webfonts for Ultimate Tinymce. You can find out more by visiting the link below:

Hope you don’t mind my “pitch” here… but it seemed very relevant. Thanks!

Jared - 3 years ago

Works like a charm! Thanks a lot!

J_K - 3 years ago

Fantastic, this saved a lot of heartache 😀

Aurovrata - 3 years ago


Clay - 3 years ago

holy cow. I need to buy you a beer. I’ve been killing myself for 5 hours today trying to get Google Fonts to work properly. THANK YOU.

Peter Knight - 3 years ago

This is not a best practice example actually. Scripts and styles should hook into the wp_enqueue_scripts action, not wp_print_styles.

And while it’s a very small nitpick, WordPress encourages a different naming convention than used here(googleFonts -> google_fonts http://codex.wordpress.org/WordPress_Coding_Standards).

And lastly, load_fonts is a very generic name, it’s best to use a prefix based on your theme or plugin to avoid conflicts.

User - 3 years ago

Dont understand how to add fonts to page.
Made new functions.php to child theme, added upper code there, what I neeed to do next?
Can anyone can explain step by step?

David Radovanovic - a couple of years ago

No bloated plugins, no fuss, no mess! Thanks for the simply clean way of using Google Fonts in my WordPress sites!

Kathy - a couple of years ago

Yes! I’ve lost track of how many times I have to override header.php in my child theme because the parent theme I am working with has hard-coded a google font.

Btw, the Codex says that `wp_enqueue_scripts` is the best hook for loading up all front-end styles and scripts, so I’d suggest the following:

function load_fonts() {
wp_enqueue_style( ‘googleFonts’, ‘http://fonts.googleapis.com/css?family=Rock+Salt|Neucha’);
add_action(‘wp_enqueue_scripts’, ‘load_fonts’);

Nuria - a couple of years ago

Works perfect. Thank you very much!

Michael Park - a couple of years ago

Thanks for sharing your solution. I used it to override the font styles of the headings on my blog (a Twenty Twelve child theme).

mzilverberg - a couple of years ago

Something I missed here were the conditional comments to make Google

Phil - a couple of years ago

Great tutorial – very useful and worked perfect. Thanks so much!

Lisa - a couple of years ago

I’m really new at this… should I do anything differently to use an Adobe Edge web font? Obviously the url will be different. Thanks!

    Ben Hunt - a couple of years ago

    Sorry, that isn’t something I’ve done, so I can’t advise.

Sebastian - a couple of years ago

There are various plugins available to make it easier to add Google Fonts to a WordPress website e.g.

Microthemer Lite: http://wordpress.org/plugins/microthemer/
WP Google Fonts: http://wordpress.org/plugins/wp-google-fonts/

Microthemer Lite is a visual design plugin. See this short video tutorial for using it with Google Fonts: http://themeover.com/easily-add-google-web-fonts-to-wordpress-with-free-microthemer-plugin/

Salman Ahmad - a couple of years ago

WoW. Thanks dude !
Previously I was using the @import method and now turned to your way because I having with compressing/minify plugin.

Emily - a couple of years ago

Thank you SO much for this it worked perfectly!

I had been using @ to call to it through the stylesheet and it only worked sometimes – this is exactly what I needed!

You rock!

Sebastian - a couple of years ago

Happy to help!

Which plugin did you go for in the end?


Comments are closed