Paul Irish

Making the www great

Details on the New Google Webfont API

As you might have see, Google now offers a full webfont API. Luckily, they let me dig into the service and code a few weeks back. So let me give you the lowdown on the features and what you can do with it…

Here’s adding a @font-face declaration for Tangerine, a nice scripty font:

1

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

You’ll then reference it font-family:Tangerine and be all set. As for something a bit more complicated:

1

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Inconsolata:italic,bolditalic|Droid+Sans">

There’s Inconsolata regular, italic and bold-italic and Droid Sans regular.

There is a high-quality curated portfolio of open fonts available (Raph Levien, designer of Inconsolata guided this project). And view the real documentation on the CSS api.

Obviously there are huge caching benefits to using the Google Font API, plus they’re very focused on performance and you can expect things to be fast and FOUT to be minimized. But on the topic of FOUT…

The WebFont Loader is also making its debut. This is a javascript library collaboration between the good boys at Typekit and Google. It basically allows a lot of control over the display details of webfonts.

Let’s say you want Firefox to not have the FOUT, but rather mimic webkit’s behavior of invisible text until the font is loaded:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Cantarell']
    }
  });
</script>
<style>
  .wf-loading h1 { visibility: hidden; }
  .wf-active h1, .wf-inactive h1 {
    visibility: visible; font-family: 'Cantarell';
  }
</style>

The WebFont Loader API provides some classes on the <html> element (a la Modernizr) and a bunch of javascript callbacks.

Check out all the WebFont demos, showing off all its capabilities. One of my favorite parts is that you can use the events and hooks it provides with your very own hosted fonts (in that demo I load Taggeschrift from paulirish.com).

The webfont loader is now an open-source project on github. Feel free to peek under the covers. Oh and do check the project docs: getting started, webfont loader, technicalities, and faq.

Ask any questions in the comments and I’ll do my best to clarify. :)

2010.05.19: The Google webfont previewer tool (with jQuery!) is pretty tight, too. 2010.05.20: Update via Florian to use .wf-loading to hide for FOUT prevention.
Take a look at some of my other (recently updated) webfont stuff:

Comments