I’m a bit of a typography nut…  it’s why I linger around print and and graphic design (yes, you can often see me loitering in the type section of the library scanning ancient books on type and avdvertising).  I get to see literally hundreds, if not thousands of creative type uses.

And I am jealous.  As a web professional, my hands have been tied for years with the same old web fonts (yawn).  Cool as comic sans is, I need more.  I want more.  And now, I have more.

The @Font Face standard has come in the last few years and lets you use server side fonts to dress up your web content.  Let me de-nerd how it works.

First, you need a font that can go on the web.  Make sure you have licensing rights or choose one of the free and great @font face kits from Font Squirrel.

Second, edit the stylesheet.  Font Squirrel provides the styles, the fonts and a working demo of the font in action.

Then, upload the whole deal (fonts, stylesheet etc…) to your web server.  I found the best results when I put the stylesheet and the fonts all in the same place.

Follow the demo they provide, drop the inline styles into your web page, right before the </ head > tag.

That’s about it.  Reference the style as you would any other with the ‘class’ tag.  I just tried out a font called Airstream, as I’m looking for some creative type examples I can use on a retro themed website.  Here’s the font in action…

I love web fonts, and free fonts, and cool retro stuff. Here’s some ipsum goo to fill space… Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non dui a ipsum elementum feugiat. Maecenas eu mauris lorem, quis consequat dui. Fusce auctor est eu ligula rhoncus sit amet imperdiet lorem tincidunt. Morbi ligula turpis, porttitor eget sagittis et, feugiat sit amet ligula. Vestibulum iaculis vestibulum enim et egestas. Nulla ut urna eu magna ullamcorper faucibus. Praesent semper lacinia tortor, eu placerat sapien laoreet eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Just like that, takes only a few minutes and works (amazingly) in both IE and Firefox.  Sweeeeet.