dimitrivanheucke.be

Yesterday, Google made some announcements. You’ve probably heard all about it, so no need to go over them all…

But I would like to look into the new Google font API.

The main problem with mechanisms like Cufon and SiFR is the legality of using the fonts. Most fonts dont come with a license to use them on the web. Therefore Google is building a library of new, open source fonts. You can use these fonts on your site, but also download them and use them in any work you like. Including print.

You can find all Google fonts in the Google WebFont directory.

Besides the WebFont directory, Google also serves you fonts through their new Google Font API:

The Google Font API helps you add web fonts to any web page.
Benefits of the Google Font API include:

• A choice of high quality open source fonts.
• Works in most browsers.
• Extremely easy to use.

Well, the choice of fonts is still very limited, but this will probably expand rapidly. The other claims are usually incompatible. This time it looks true.

Lets do a quick test. To use one of the new Google fonts in your project, just link to the @font-face definition and you’re ready to go.

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie'
	rel='stylesheet' type='text/css'>
<style>
	.googlefontapi {
		font-family: 'Reenie Beanie', arial, serif;
		font-size: 32px;
	}
</style>
<div class="googlefontapi">Type through Google font API!</div>

This css should result in this:

To use multiple types on your site, you can use mutiple link tags, but this would increase your http-request count. You can get more @font-face definitions in one request, just compose your link url like this:

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie|Droid+Sans'
	rel='stylesheet' type='text/css'>

What does it do?
Because most browsers implement @font-face slightly different, so google serves the right format for the browser of your user.
Cache headers for these files are set to the maximum so it will be very likely popular fonts can be loaded from the browsers cache.

If you want to use your Typekit fonts, you can use the Google WebFont Loader. This is a JavaScript library that gives you more control over the font loading and allows you to use other font-providers.

Note: don’t use font-face for your large texts. Rendering in IE stays ugly. For bigger things like titles, it’s perfectly usable…