03 August 2010
Posted in
Tools & Services
I know it's corny, but I had to say it before it was no longer relevant and, with the new Google Font Directory, that may be sooner rather than later.
Some background on web-safe fonts.
As long as web sites have been developer, HTML has only been able to display text using fonts stored on the same computer that the web browser is installed. This mean that if the font was not there, it would just roll back to whatever the default font was for that browser. In most cases, this mean Times New Roman or Arial.
Later, with the advent of CSS, we were able to specify 1st, 2nd and 3rd choices of fonts so that, if choice A was not on the machine, it would show choice B and so on before rolling back. This is when we started to specify a font-family. You can look at a nice list of them at http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html. Even with this better variety, we were still heavily limited and the designer was really constrained having to work around this.
There are also tools such as sIFR (http://www.mikeindustries.com/blog/sifr/) that allow us to replace certain items with a flash based font tool. This is ok, but can be tricky to implement and has had questionable results.
Enter Google Font Directory
Google has recently released the Font Directory at http://code.google.com/webfonts. With this tool, we now have a collection of fonts that are in the public domain and are stored on the Google server and can be reference remotely and then loaded onto the end-users browser.
This means that we may soon have literally 100's or even 1000's of new fonts added to our web design toolbox. Here are a few examples:
Yanone Kaffeesatz
IM Fell English SC
Tangerine
As you can see, the fonts are now embedded into the page regardless of the end-client.
How do I make this work?
Implementation is simple. You just need to reference the font loader on the Google site by putting a style-sheet reference in your HTML that looks like this:
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
Or, you can put an import command into the top of your CSS file that looks like this:
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
Once that is done, you just reference the font with either in-line styles like this:
<p style="font-family: 'Yanone Kaffeesatz', arial, serif;">Some Text</p>
Or, you can use them in your stylesheet, like this:
p { font-family: 'Yanone Kaffeesatz', arial, serif; }
