Google Web fonts are amazing free resource for web designers. In WPBv4, we have started using a popular Google Font combination: Oswald and Lora. Some of our users have asked us how to add Google Web fonts in WordPress themes. If you remember, we showed how to add Google fonts in WordPress Post Editor. In this article, we will show you how to add Google Web Fonts in your WordPress themes the RIGHT way, optimized for performance.
Find the Google Web Fonts that You Like
First thing you need to do is find a Google font that you like. Head on over to Google fonts library and browse through the fonts. When you find the font that you like, click on the “Quick-use” button.
Once you click the quick-use button, you will be taken to a new page. Scroll down till you see the box: Add this code to your website.
Copy that code and paste it in a notepad for future use. We are seeing that most folks use at least two google fonts (heading + text combo). Like we did with Oswald + Lora. So repeat this process for the second font.
Adding Google Web Fonts in WordPress Themes
As you can see that Google provides 3 possible ways of adding Google web fonts to your website. There is the “Standard” way, “@import” way, and the “Javascript” way. We have mostly seen folks using the first two methods.
The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in step one like so:
@import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);
We have seen a lot of folks doing this. StudioPress developers are doing it this way in their Genesis child themes because its simple. However, this is NOT the right way of doing it. Using @import method blocks parallel downloads, meaning that the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. So while it may seem convenient, it is not the BEST way if you care about your site’s speed and page load time. You can see more details about it here.
The next best thing you can do is merge multiple Google Fonts requests into one to avoid additional HTTP queries. Here is how you would do it:
@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);
If you MUST use @import, then at least combine multiple requests into one.
Performance Optimized Method of Adding Google Web Fonts
The best way of doing this is by using the Standard method which utilizes the link method instead of the import method. Simply take your two URLs that you got from step 1. Combine the two fonts with a | character. Then place the code in your theme’s head section. You will most likely have to edit your header.php file, and paste the following code above your main stylesheet. The example would look like this:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen"> <link rel="stylesheet" type="text/css" href="YOUR THEME STYLESHEET" media="screen">
Basically the goal is to put the font request as early as possible. According to the Google Web Fonts blog, if there is a script tag before the @font-face declaration, then Internet Explorer won’t render anything on the page until the font file is done downloading.
Once you have done that, you can simply start using it in your theme’s CSS file like this:
h1 {
font-family: 'Oswald', Helvetica, Arial, serif;
}
Now there are a lot of theme frameworks and child themes out there. It is NOT recommended to modify your parent theme’s files specially if you are using a theme framework because your changes will be overridden the next time you update that framework. You will need to utilize the hooks and filters presented to you by that parent theme or framework to add Google fonts properly in your child themes.
As you can see by looking at our Blueprint page, that WPBv4 is a custom child theme of the Genesis framework. So we will show you how to add Google Web fonts in your Genesis powered theme.
How to Add Google Web Fonts in Genesis Child Themes
Open your child theme’s functions.php file and paste the following code:
add_action( 'genesis_meta', 'wpb_add_google_fonts', 5);
function wpb_add_google_fonts() {
echo '<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lora|Oswald" media="screen">';
}
Don’t forget to replace the font link with your own.
Basically what we are doing is hooking into genesis_meta hook which excutes in the section of the document source. By default things like META description, keywords, stylesheet and favicons are output here. By us setting the priority to 5, we ensure that this stylesheet will be loaded before the main stylesheet.
Sorry we cannot cover all existing parent themes and frameworks that exist. If you have a question regarding your specific theme, then please ask those in the appropriate forums to those theme developers.
Our last tip on using Google Web Fonts on your site would be to don’t ask for fonts you won’t use. For example, if you only want the bold, and normal weight, then don’t add all the other styles.
We hope that this article helps you add Google Web Fonts in your WordPress themes the right way, so your site can load fast.
What about adding Google Fonts to the admin side?
Why would you want to add Google Fonts to the admin side?
Thanx a lot for sharing, I’m really happy with this. I’m a Genesis user and started using @import because it’s alraedy being done in the stylesheet. Feel much better about this solution.
Happy 2013!
In your code do I replace “YOUR THEME STYLESHEET” with something??
mine is STYLE.CSS, or does it need to be a URL ??
thanks,
Jeff
Yes, you need to insert your theme’s style.css path there.
This is what I use…..
Add this to your theme’s functions.php file:
/*----------------------------------*/ /* 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');What do you think about this?
Better still add a conditional comment to serve the fonts separately for IE 7 and 8:
From here:
http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
Nice tuts. I had wanted something like this..Kudos!!
What about the JS option, is that a faster option Or the one is the better?. Thanks
The method in this one is by far the most recommended one.
In your answer you don’t enqueue the css – is that really the best way to add it?
Great article! I think it would be pretty cool if wordpress, by default, had Google Fonts included into it, but this seems easy enough. Thanks for explaining!
Google Fonts are great, but not everyone uses it (considering the amount of folks who use WordPress). WordPress has a 95% rule. If the feature would not satisfy 95% of the audience, then it is usually falls in the plugins category. However, sometimes exceptions are made. We can assure you that the Core WP team, will not make this into an exception though
You rock man! Just what I was looking for! Thanks for putting up this post… I searched forever trying to find something about adding this to my theme. Glad I stumbled across your page.
Great post and even if their is a plug-in to do this, it’s always better to learn the non – plugin way also.
So obviously you dont accept using the several Google font plugins. I am going to have to revisit my css files in that case.
i dont understand the second part which is adding font to the genesis add action thing.. is that another method to add in google web font?
and i know we dont have to incld all styles of the font, but the recommended method, which is http://fonts.googleapis.com/css?family=Lora|Oswald
just for instance, what if i only want bold style for lora and light style for oswald, then how to combine the font styles?
thanks
The second part is for Genesis Users ONLY. If you are not using the Genesis Theme Framework, then you don’t need that part. To combine styles like you want, here is how you do it:
http://fonts.googleapis.com/css?family=Oswald:300|Lora:700
What should I do if I want to use @font-face in Genesis Framework like you showed here with the Google Webfonts, are there any solution for that.
I’ve been searching all day since my fonts loads incredibly slow!
Cheers
great tutorial…i actually use the wp google fonts plugin…would you recommend that plugin or doing the manual way as described above..which is efficient performance wise?
Haven’t tried that plugin. But we almost try to avoid plugins of that sort because it can be done easier with theme files.
sweet…thanks will edit my theme instead of using a plugin
Avoiding the google fonts plugin because it is a plugin is not a good reason at all. Using the plugin actually provides you with much more flexibility than including it in your theme, especially if you ever choose to change themes.
As far as I’m concerned, fonts in most cases are considered stylistic elements thus theme based, and they usually change when you switch to a different theme.
Superb post I was looking for this only i was trying my hands with css and fontface .I ll try this one too thanks
The “Right” way would be to use the wp_enqueue_style function
Here’s some more thoughts: http://kovshenin.com/2012/on-wordpress-theme-frameworks/
Konstantin, I totally agree with you. wp_enqueue_style function should always be used. That is what I tried doing first as suggested by Nathan Rice, in StudioPress’s article about Google Fonts. Except Google clearly states, that the font styles should be loaded before anything else. Using wp_enqueue_style and then printing them using wp_print_styles, this was printing the item after the main stylesheet was already loaded. That was the reason why I had to hook into genesis_meta() hook. Anyways, totally agree with your thoughts on your article.
I’m a little late to this, but I wanted to mention that you could still use
wp_enqueue_style, just set the priority higher so that they are loaded firstGreat tutorial. One observation though: first image in the article was meant to show the @import tab, wasn’t it?
No it wasn’t suppose to show that.