How to Use Google Web Fonts With Your Genesis-Powered Website

There is a lot of buzz going on these days with web design and custom fonts – and more than likely you’ve seen some typography that you’d die to have on your site. Some of these are paid fonts, which you might want not want to spend money on.

Google Comes to the Rescue

Google Web Fonts lets you browse all the fonts available via the Google Web Fonts API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.

And they are free. That’s great news, right?

Well yes it is – especially if you’re running the Genesis Framework on your website or blog. With a few simple steps, you can select any of the Google web fonts and implement them into your design.

How to Implement Google Web Fonts

The first thing you need to do is to identify which font you’d like to use. You can do so by visiting the Google Web Fonts page, and browsing by various criteria.

As soon as you find a font you like, click the “Quick Use” link and you’ll be taken to the font page. Toward the bottom, you’ll see the Developer’s Guide section – click on the link that says “@import” which will display this:

@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

Adding to Your Child Theme’s Style Sheet

The first thing you need to do is add the following code to the top of your style sheet. You’ll want to do it immediately after the style sheet header (which has info such as Theme Name, Version, etc.)

/* Import Fonts
------------------------------------------------------------ */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);

Make sure the code is placed above any of the child theme’s CSS definitions.

The last step is defining the font in places you want to use it. For example, if you want to use the Droid Serif font in the navigation, you would add it to your font stack below like you see below:

#nav {
    font-family: 'Droid Serif', serif;
}

It’s that simple – using Google Web Fonts with your Genesis theme is that easy. Just follow the steps mentioned above, and you can add some wonderful typography to your website or blog.

Comments

  1. Wouldn’t it be better to include a link to Google’s stylesheet in the head of the site, rather than using @import? Here’s a post the makes a pretty strong case against using @import: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

    • Possibly – but you’d have to enqueue the code through functions in order to make sure there were no other compatibility issues. Also, placing it at the top of the style.css files ensures that the custom fonts will process and display properly, without any minute flashes of font replacement.

  2. If you want to do this with out coding the fontific plugin works great. Makes it extremely simple to use different fonts with different tags.

    • Thanks Nick, I was just about to say surely there’s a plugin to save me having to faff around with it all :)

      • I’m fairly confident that configuring a plugin to work with a theme is more complicated than what has been outlined in this tutorial.

        All you have to do is make a few edits to your stylesheet. Ditch the plugin on this one. ;-)

  3. They work pretty well in Photoshop too I’ve found.

  4. OK, I was mistaken when I gave Brian that information. Travis, you’re right that using 2 LINKs is faster than the @import at the top of style.css, AND the Google font actually downloads after style.css is loaded. So yes, it would be slightly faster to do 2 LINKs, and using @import doesn’t actually avoid the FOUC.

    However …

    Using the @import method is, by far, the easiest way to use Google font libraries. And when you consider that Google is, quite likely, the fastest CDN on the net, AND the fact that Google fonts are loaded all over the net nowadays, chances are visitors will already have the stylesheet cached OR will cache it upon visiting your site.

    To me, the extra effort isn’t worth that tiny performance increase, especially considering that the performance increase might not even exist for some of your users, and even if it does, it will likely only help once.

    If you would like to use the LINK method, I’d suggest this Codex Article for more info.

    • Good points, Nathan. I tend to over-obsess about performance issues. :)

      One question – do you know if the entire css file gets cached, regardless of any parameters passed in the request (e.g. different weights and styles)?

      • Not sure. My guess would be that each browser might handle that differently, but I think that most modern browsers would recognize the filename requested is in local cache, and load that version.

        Obviously, if the parameters are different, it should load from the CDN. And the fonts themselves are cached individually, I believe.

  5. How come you don’t just use the Google Fonts plugin? Is there a compatibility issue with StudioPress?

    DAWN

  6. Oh ok, good. I have used the plugin on client sites and wanted to make sure I am not causing problems by using it with StudioPress. Thanks!

    • Using the plugin (assuming it’s coded well, up-to-date and secure shouldn’t present a problem. We like to find ways to include things that don’t require 3rd party plugins so that you have “less” to worry about when WordPress itself is updated.

  7. I thought we weren’t supposed to monkey with style.css, and make all our changes in custom.css?

    • Stephen, not sure what you are referring to – with Genesis, all customizations are supposed to be made via the child theme – which has it’s own style.css file.

  8. Yes… but even in the child theme, I’ve been making all changes in /childtheme/css/custom.css, overwriting what’s in /childtheme/style.css. Overkill caution?

  9. hi Brian, I like the font you are using in this post (Title and Header). How can I integrate it in my Agentpress theme?

    I like to enlarge the font of the Arial paragraph. How do I do that?

  10. Hi Brian;

    Which font did you use on lifestyle theme?

  11. Neat trick, and seems a bit quicker, but had to go back to using LINK. Found that the @import approach fails in Firefox (as in, Firefox sees the @import at the beginning of the css then ignores it and the rest of stylesheet).

    Probably a workaround, but went back to using LINK instead.

  12. I found that the @import failed for me in any version of IE before 9–not sure if it was the google font I used, or what. In order to make sure that most of my site visitors (who are using IE8 or IE7, unfortunately, although I wish they weren’t) can see the sites I’m making the way I want them to, I also had to switch to the LINK method, which does seem to work, even in compatibility mode.