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.
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.
1 2 3 4 5 6 | 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.
37 Comments Leave a comment
Leave a comment
Thank you. Seriously. Thank you.
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!
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.
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.
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.
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.
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.
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
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
Luke, the plugin is “My Syntax” – see http://toxigeek.com/plugin-my-syntax
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.
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?
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!
Perfect tip, thank you Dan. I prefer adding a few lines of code to functions.php over using a plugin whenever possible.
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
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.
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/
That is correct. Code for enqueuing scripts and styles should not be in wp_print_* but wp_enqueue_scripts.
http://wordpress.stackexchange.com/questions/21561/where-is-the-right-place-to-register-enqueue-scripts-styles
Too bad the author doesn’t seem to update the article, it’s a bad example at the moment.
I see also Kathy agrees with us: http://www.webdesignfromscratch.com/wordpress-tutorials/using-google-web-fonts-with-wordpress-the-right-way/#comment-59178
Hi Loe. Actually, the author of this post no longer works here. Dan has moved on to great things at WooThemes.
Hi Ben, ah right, that’s why
.
It would most certainly be nice if you or somebody else could update the code sample, so future readers wouldn’t be misguided.
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…
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’);
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!
Works like a charm! Thanks a lot!
Fantastic, this saved a lot of heartache
Pingback: The Right Way to Use Google Web Fonts with WordPress | l33thax
Neat
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.
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.
Pingback: TWTW: New Resources and Tools, Wordpress Section, Web Dev and Inbound Marketing Updates - Bibiano Wenceslao - Bibiano Wenceslao
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?
No bloated plugins, no fuss, no mess! Thanks for the simply clean way of using Google Fonts in my WordPress sites!
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’);
`
Pingback: Using web font – Part 2 | Free CSS Tutorials, Web Designers House
Works perfect. Thank you very much!
Thanks for sharing your solution. I used it to override the font styles of the headings on my blog (a Twenty Twelve child theme).