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:

<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:

.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:

<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:

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.

Tags:

• CSS
• fonts
• open source