The latest design trends point directly towards the use of Google Fonts within a website.
Google believes that everyone should be able to bring quality typography to their web pages and applications, so they made it extremely easy to implement their fonts.
A few months ago I feel deeply in love with Typekit Fonts, but I’m still a huge fan of using Google Fonts — especially within sites running the Genesis Framework.
Using Google Fonts in a Genesis-Powered Website
Over a year ago we started implementing Google Fonts into our themes over at StudioPress.
We choose to use Google Fonts over other font sources such as Typekit and Cufon primarily because they were free — which allowed our users to easily use them without having to pay.
After all, we felt that showcasing an elegant look on a demo site but requiring folks to purchase a font would be an incredibly bad user experience.
So we made it easy for them by doing the dirty work and implementing them into our themes.
A New Method for Loading Google Fonts
Admittedly the way we began loading Google Fonts in our themes wasn’t the most ideal.
However, we recently began implementing them in a way that is much more efficient — and ultimately we feel is the proper way to do it.
Let’s take a look at how they are currently being loaded. If you open up one of our child theme’s style.css file, you’ll notice something like this towards the top of the style sheet.
/* Import Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Merriweather);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);Using Yahoo’s page performance tool, you’ll see that this method requires (2) additional HTTP requests, and loads the Google Font style sheets separately. Here’s how the test report looks:
While the file size for each style sheet isn’t very big, using an alternative method shouldn’t be overlooked. It’s true that on your site you might not experience any type of issues from this method, but high traffic sites such as Mashable could.
So I’d like to introduce the new method we are using, and I’ll show you why this is better. Open up one of our child theme’s functions.php file and place the following code:
/** Load Google fonts */
add_action( 'wp_enqueue_scripts', 'custom_load_google_fonts' );
function custom_load_google_fonts() {
wp_enqueue_style( 'google-fonts', 'http://fonts.googleapis.com/css?family=Merriweather|Open+Sans', array(), PARENT_THEME_VERSION );
}This code will load a Google Fonts style sheet and include both the Merriweather font as well as the Open Sans font.
Using Yahoo’s page performance tool, you’ll see that this method requires (1) additional HTTP request, and loads the Google Font style sheets combined. Here’s how the test report looks:
UPDATED: Combining Fonts in Your Style Sheet
It’s been brought up in the comments below about the possibility of combining the Google Fonts at the top of a style sheet, which would serve the same purpose as the method above.
So simply doing this would also save HTTP requests and help with page speed:
/* Import Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Merriweather|Open+Sans);With HTTP Requests, Less is More
Imagine if you had 3 (or more) Google Fonts being loaded onto your site? If you do the math, and multiply the additional HTTP requests by the number of page views per day, you’d quickly see why this is important.
To make things clearer, let’s use StudioPress as an example. On any given day, we see anywhere between 50,000-100,000 page views — which means if we loaded three Google Fonts on each page, we’d see an additional 100,000-200,000 HTTP requests per day.
Thankfully we’ve got some pretty smart people and a really good server setup, which is optimized for high volumes of traffic across our sites.
If you want to experience the enhanced performance and security that comes from the synthesis of WordPress-optimized servers, take a look at our Synthesis Hosting plans.
A solid server and reduced HTTP requests via this method of loading Google Fonts should result in a much better user experience!
This is great!
Does it matter where, in the Functions.php, we place the code?
Thanks
Nope, just make sure it’s after this:
Awesome. Thanks Brian!
Thanks Brian! I’m excited to try this new method.
You’re welcome – I love sharing little tidbits of things that I do for my own site!
Is this better than just combining them in the style sheet, which you can also do? E.g. @import url(http://fonts.googleapis.com/css?family=Merriweather|Open+Sans);
Honestly I don’t which of these options would matter in that instance as they are basically doing the same thing. Combining at the top of a style sheet would save the extra request and help speed up page load, so that should work just as well.
Like SoZo mentioned above…but what if we have three or more Google fonts? Would it look like this in the style sheet?
@import url(http://fonts.googleapis.com/css?family=Merriweather|Open+Sans|Oswald|Lora|Arvo);
The way I’ve always done it is a mix of both your examples, like
@import url(http://fonts.googleapis.com/css?family=Merriweather|Open+Sans);
Isn’t this making a single http request as well?
Yes it is, as I mentioned in John’s comment. And quite honestly, I see more instances when doing it this way would make things easier for a web developer.
Not sure what kind of difference it makes with YSlow, but I don’t put Google Fonts into my CSS, I put them in the wp_head Hook section of Simple Hooks. It makes your “Avoid CSS @import” in page speed a much better grade.
Putting the link in the WP Head hook is another way to do it if you’re using Simple Hooks. That should work just fine, just make sure you combine the fonts in the code if you’re using more than one, so you don’t end up with the same issue.
Another small piece of the Genesis jigsaw – thanks Brian.
Good stuff in the comments as well.
More great advice. Keep it coming Brian… much appreciated.
This is interesting information. Time for this newbie to sit back and digest it.
I found Steve Souders (old?) article on link vs @import interesting:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
It compares different combinations of using link and @import and looks at when scripts are loaded in parallel (faster) or in series (IE) and the danger of scripts getting loaded out of sequence. The comments are valuable, too.
Excellent post and it come out at the right time because I was facing the problem of google font not working right on my site.
I had a question Brian! Does it matter how many google fonts you are importing to the one child theme? How many google fonts we can import into one child theme to good effect?
Ryan,
Such an informative post! I always just did it through the style.css only, and even though it had an increased server load, it never bothered me. I now know what you mean by adding too many HTTP requests. Any way this could be done through simple hooks as well?
How would you use this same method to enqueue TypeKit fonts into a Theme?
With Typekit all you need to do is generate the code from them that loads all the fonts and place that into the Header Scripts option box on the Genesis Theme Settings page.
Hi Brian I nitice with your new layout there’s no contact option for you if someone wanted to reach you.
Check the footer, where it says “get in touch”.
LOL got it
Great site Macca!
Couldn’t find a contact form.
Getting old!. Really am! Eye sight gone at 45 hahaha. Just wanted to send you a message and say thanks for the great tutorials and that i’m a big fan of Tri’s and the people that train for them.
9.8 times out of ten i love you guys at Copyblogger media!
Recently discovered your community themes which i think adds a different style of child themes to your range from designers that love building on the Genesis framework.
Hi Brian, I’m trying to figure this out for the prose theme, but it doesn’t seem to be working.
Awesome tip. I have been looking for ways to spice up the old Revolution Pro Media 1.0.
Not quite sure how to add this in at first since I don’t have Genesis theme, but Google’s own site was very helpful with tips on how to do that. http://www.google.com/webfonts. Perhaps Terence, you can take a look there.
I found the solution! Thanks to “Blogging with Amy” youtube vid http://youtu.be/BUnhrg0KCdM
I was just working with page load times for a client last week – and now here’s a great solution. It’s amazing how timely you are.
I’ll be bookmarking this one.
Great tip, Brian. Will definitely apply this. Also, some tests show using LINK instead of @import maybe more efficient.
Thanks Brian,
You gave me some useful tip.
Ahh finally ! I could not get a new font I was trying to use on a site I am designing to show up! Was driving me nuts! Using the code in the functions.php did the trick! THANK YOU!!!
Seems the old @import method I was doing, is not working as simply as it used to a few months ago.
I found another important use of importing Google fonts through functions.php (as suggested above). I was having a problem on my blog – using the Fabric Child Theme – when using WP Minify plugin, as the @import of the fonts from Google in style.css was not being handled properly during ‘minification’ by the plugin. As a result, the blog header and post titles were unable to produce the intended custom fonts. Once I shifted the import to functions.php and deleted it from style.css, everything worked out well.
Incidentally, I was referred to this article by the very helpful Jennifer Baumann of Copyblogger Media Support. Thanks Jennifer!!
Yes, excellent point Sandy. Good to hear you found the resolution, and awesome to hear Jen’s treating you well.
Have you looked at this verses using Google’s Javascript WebFont Loader?
Nope, but this post is a bit outdated, and there’s a chance we have a Google Font function in Genesis.
What does “there’s a chance we have a Google Font function in Genesis” mean? Confused if you meant “[we'll] have a GF function in Genesis [soon]” or “we [already] have a…”, since I assume you of all people would know if you did or didn’t
Searching the new support site and forums didn’t bring anything useful up for me (I find the new support site extremely difficult to find anything on — I miss the PHPBB forums — so it doesn’t surprise me too much).
Actually @import prevents the loading of the rest of the css file until the import is complete (by blocking them). Though minimal impact, it is actually faster to have the extra HTTP request than to use @import. So the better and preferred method would be to use wp_enqueue_scripts hook though @import may be easier. See here for more information.
Thanks Travis. I remembered reading Steve Souders post a while ago it’s part of what prompted the question. If I read correctly I think the @import blocking depends on the browser, but the info is all so dated it’s hard to know. YMMV, but I don’t really care if it only blocks on IE8 if everything else runs parallel which I think is the case.
Even if using wp_enqueue_scripts I think you’d want to combine multiple font requests into a single http request.
Google has their own font loader though and I thought it invoked some other magic to optimize loading (vague recollection of a google blog video I saw more than a year ago).
I know this is a late reply to this post, but I was doing 3 @import fonts in my style sheet and just combined them into one. Sweetness. Thank you Brian!