How to Use the Google Font Directory With WordPress and BuddyPress

Big news this week is that Google has released the Google Font Directory and Google Font API. The Google team collaborated with the folks at Typekit to deliver this new open source fonts project.

All fonts in the Google font directory are available for use on your website under an open source license and are served by Google servers. The service is very much like Typekit, except that it’s free and unbranded. No wonder they’re teaming up. ;) There are currently approximately 20 fonts of varying styles in the directory, but expect this number to grow in the coming days.

So far there aren’t any plugins available for using Google’s font library with WordPress, but it’s easy to start using them on your site.

How to Use Google Fonts With WordPress in Two Simple Steps:

Step 1: Add the following to your header.php file inside the head tags:

1
<link href="http://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet" type="text/css" />

Step 2: Apply the font to any class or ID in your theme’s stylesheet:

1
2
3
4
.foo {
font-family: 'Tangerine', serif;
font-size: 48px;
}

That’s it! You’re finished.

Using Google Fonts With BuddyPress:

Let’s do one more example. Say you want to style the BuddyPress default menu using the Yanone Kaffeesatz font. You can click on “Get the Code” and Google will tell you how to add it to your site, as well as provide examples of font variants and advanced techniques.

Step 1: Call the font from Google using this tag in your header.php file inside the head tags:

1
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />

Step 2: Add the font to the CSS class or ID in your child theme’s stylesheet:

1
ul#nav li a { font-family: 'Yanone Kaffeesatz', arial, serif; }

You’ll get something like this when using the default theme:


So simple!

If you have a little knowledge of JavaScript, you can also use Google’s WebFont Loader to exercise further control over how the font loads, beyond what the Google Font API provides. The WebFont Loader works with fonts on your own server, links to the Google Webfont API, or any Typekit account.

Why use fonts from the Google font directory?

  • The fonts are open source and you don’t have to host them
  • Cross-browser compatible
  • Text styled in web fonts is still searchable
  • The fonts scale crisply when zoomed
  • Accessible to users using screen readers
  • Google fonts allow for CSS3 and HTML5 styling, including drop shadows, rotation, etc

Custom fonts are the first step to making your site look like your own creation and not “just another WordPress blog.” Google has made this incredibly easy to implement, so there are really no excuses for boring typography. Keep an eye on Google’s font library for new additions now that it’s open to designers for submission. Also, watch the WordPress repository for plugins that will make this process even simpler for users who don’t want to edit any template files.

Comments (26)

  1. I am using Thesis theme. I inserted in Additional Scripts in Thesis Site options and I tried to insert h1 { font-family: ‘Droid Serif’, arial, serif; } in Custom File Editor.

    It would not work. Any ideas where to update these two scripts in Thesis theme?

    Thank you

  2. Jeff – Very cool. Does it output the CSS to the header? For some reason CSS in the header bothers me and I would prefer it in the stylesheet so that it’s part of the theme. But it doesn’t make that big of a difference, right? Maybe it’s a silly thing for me to be picky about.

  3. Thanks!
    It does output a little to the header, not much though. I don’t know of another way to do it dynamically.

    It is really simple to use. Just pick a font, drop it in the input box, and specify an default since most of the Google Web Fonts in the directory are inactive. It will revert to your default font if so.

    You can see the code if you view source on that site. It uses the plugin, and it is running WP 3.0 beta 2.

    You rock btw Sarah!

  4. Sarah – Awesome, I would be honored. I worked hard on it, and I think many people will find it useful.

    Joshua – I have found that many of the fonts in the directory are inactive including all of the droid fonts..

    My plugin uses the Google Web Font Loader, which gives the API some additional functionality. I plan to add Typekit options, font sizing, and lots of other features when I find the time.

    The Web Font Loader lets you enter a font to use if your chosen font becomes inactive. In development, I tried them all. It is easy to tell if the chosen font is active or not, because Firebug will show the inactive font is being used.

    Remember that this API and directory was just released, and is in beta. I suspect that It may have been pushed out early, so it could be announced at Google I/O.

Participate