Google releases Font Directory to embed open source fonts on your websites

Today is Day 1 of Google I/O, the largest developer conference hosted by Google, focused on Android, Chrome, GWT, and of course, open web technologies. Besides the keynotes, there are more than 80 sessions focusing on specific topics of the afore mentioned Chrome, Android and GWT, but also covering geolocation services, social web, Google Wave, App Engine and others.

But as a designer, you will really get excited with the announcement of the Google Font Directory, a free service where they will be serving high quality open source fonts for web embedding. Let’s see how simple it is to embed your fonts using Google Font Directory.

The service offered by the Font Directory is very similar to the service provided by Typekit, but Google’s is free and unbranded. All you need to do is to load the CSS stylesheet provided by Google that contains the open source font you want and use it on your own stylesheet. Google explains on the press release for Font Directory, that the fonts support CSS3 and HTML5 properties such as drop shadows and rotation.

Ok, let’s jump into the fonts! You might have seen by now the title of this post stylized with Lobster, a font from Font Directory, which is also available for free (you won’t be seeing it in a RSS reader so jump to the site). The code used to get Lobster definition is

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Include this on your HTML and you’re ready to go. If you want to embed more than one font, you can request many fonts at once using something like this example from Google Font API

<a link href='http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans' rel=''stylesheet' type='text/css'>

Here we are requesting the Tangerine, Inconsolata and Droid Sans fonts, with bold, bold italic variants for Tangerine and italic for Inconsolata. The variants available for any particular font are described on each font page, for example, this page for Droid Serif.

Once you have loaded the proper stylesheet, all you have to do is to use the font family name on your CSS. For the title of this post, I’m using

.single h2 {
font-family: 'Lobster', Georgia, sans-serif;
}

And that’s all you need to display the selected typeface. You can now add text-shadow for instance and it will work just like it would do on a web-safe font like Verdana. Now, if you’re hunger for more, the site for Google Font API offers all the documentation you need, describing techniques like the WebFont Loader, an alternative method of loading the webfonts using JavaScript. However, not everything is perfect: it’s not compatible with Opera, iPhone/iPad/iPod or Android right now, as the supported browsers list shows.

There are few fonts on the repository right now, but the base font is expected to grow, and you can help on this. If you’re a designer/typographer and want to collaborate, just get in touch with Font Directory providing information about the font you want to release for free. It would be awesome to see more type foundries joining like of Exljbris or The League of Moveable Type and making their free fonts available for use.

Tags: google, open source, type foundry, typeface. Categories: Graphic design, Typography.
Wednesday, May 19th, 2010.