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.

47 Comments Leave a comment

  1. Lisa says:

    Thank you. Seriously. Thank you.

  2. Jay says:

    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 says:

      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.

  3. Alyeska says:

    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.

    Thanks.

    • Dan says:

      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.

  4. Rick says:

    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.

  5. Mike says:

    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 says:

      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 :)

  6. Luke says:

    Hi,

    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!

    Thanks,
    Luke

  7. Paula Tiller says:

    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 says:

      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?

  8. McKenzie says:

    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!

  9. Barry Kafka says:

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

  10. Joan says:

    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?
    Thanks,
    Joan

    • Ben Hunt says:

      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.

  11. Loe Spee says:

    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/

  12. Scott Whittle says:

    Dan,

    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 says:

      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’);

  13. Josh Lobe says:

    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:
    http://www.plugins.joshlobe.com/ultimate-tinymce-google-webfonts/

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

  14. Jared says:

    Works like a charm! Thanks a lot!

  15. J_K says:

    Fantastic, this saved a lot of heartache :-D

  16. Pingback: The Right Way to Use Google Web Fonts with WordPress | l33thax

  17. Aurovrata says:

    Neat

  18. Clay says:

    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.

  19. Peter Knight says:

    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.

  20. Pingback: TWTW: New Resources and Tools, Wordpress Section, Web Dev and Inbound Marketing Updates - Bibiano Wenceslao - Bibiano Wenceslao

  21. User says:

    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?

  22. David Radovanovic says:

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

  23. Kathy says:

    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’);
    `

  24. Pingback: Using web font – Part 2 | Free CSS Tutorials, Web Designers House

  25. Nuria says:

    Works perfect. Thank you very much!

  26. Michael Park says:

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

  27. mzilverberg says:

    Something I missed here were the conditional comments to make Google’s webfonts work in IE8 and below if you request more than one font weight. For example:

    That’s why I created a function for loading fonts: https://github.com/mzilverberg/LoadGoogleWebfonts

    My script also places the appropriate fallback urls within a conditional comment.
    With a few lines of code you could also make this work in functions.php in your WordPress theme.

  28. Phil says:

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

  29. Lisa says:

    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 says:

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

  30. Sebastian says:

    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/

  31. Salman Ahmad says:

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

  32. Emily says:

    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!

  33. Sebastian says:

    Happy to help!

    Which plugin did you go for in the end?

    Seb

  34. Pingback: Using Google Web Fonts with WordPress | fsimerey

  35. Pingback: digisynthesis – Big list of WordPress links