The future of web typography, thank you google!!!

As I am sure you are aware, the issue of “web safe” fonts is a web designers nightmare. Dulling down designs due to the lack of cross computer consistency in font libraries greatly limits designers and thus design on the web. To this point the main work around for this has been creating images of type and then using some sort of complex code to allow a browser to still see the contents of that typography-a rather silly practice, when type should not need to be re-written in order to be read (by man or machine..). These techniques I detailed in an older posting which you can read about here: Images to Replace Text. But there is an easier way!!!

The other, better, solution has had much buzz about it and is still in development. This option is Font API, VML, flash, or some other script that allows you to embed a font file into your website, thus displaying the code as you would like to, without having to use images or other workarounds. The issue here as always been the obstacles of downloading the fonts, multiple font formats and of course licensing. Well, wouldn’t you know it, those folks over at Google came up with a solution! Google Font API! Released on May 19th, this bad boy seems like a gimps of the future. Sure it is still in Beta and it has a limited library, but it is sweet! Let me break it down for you…

How does it work?
Well it is startlingly easy! Google hosts all of the fonts and releases the licensing such that you need not worry about using it. All you need to do is follow three easy steps! First, copy the following bit of code into the head of your HTML document:

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

You should note that for the “family=Family+Name”, the name of the font (which you can get from the Font API section) should replace “Font+Name” and any spaces should be replaced by a “+”. Once you have this link tag in the head of your document, the second step is to call the font-family in your CSS, like so:

selector{
    font-family: 'Font Name', serif;
}

Here be sure to specify an alternative font!!! This process is still not 100% bug free and there is a chance that that alternate font will be needed. Ideally you should make sure that the alternates drill all the way down to either serif or sans-serif. This leave the last part of just putting the CSS selected element into your HTML. Really it is as easy as one, two, three! Check it out…

Yanone Kaffeesatz: Was first published in 2004 and is Yanone’s first ever finished typeface

Tangerine: is a calligraphy font inspired by many italic chancery hands from the 16-17th century.

Droid Sans: Is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp

IM Fell: Credited to Peter De Walpergen as the types founder.

Josenfin: Is based on Rudolf Koch’s Kabel (1927), Rudolf Wolf’s Memphis (1930),Paul Renner’s Futura (1927?).

For a complete list of the Google Font Directory visit http://code.google.com/webfonts. There you will find a complete list of the fonts, the background on the fonts, their glyphs and styles. Similarly for a more thorough demo/explanation of the font embedding process, visit http://code.google.com/apis/webfonts/docs/getting_started.html. Happy coding!

Tags: Design, Tricks of the Trade, Web Design, Web Dev, Web Development, What's Hot

This entry was posted on Monday, July 5th, 2010 at 11:36 pm and is filed under Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.