Fonts

If you’ve been tooling around web design and developer sites lately, you may have noticed a strange phenomenon. Nice fonts. Much nicer than the default web fonts, and no, they’re not images. I know from the 100 times I’ve selected the text muttering ‘wow that’s cool’. We’re no longer stuck in what I’ve heard humorously termed as ‘arial hell’.

Until now, this was about it for web safe font usage:

Arial, (mac: Helvetica)

Arial Black, (mac: Gadget)

Comic Sans MS

Courier New

Geneva

Georgia

Impact (mac:Charcoal)

Lucida Console, (mac:Monaco)

Lucida Sans Unicode, (mac:Lucida Grande)

Palatino Linotype, Book Antiqua

Tahoma, (mac:Geneva)

Times New Roman

Trebuchet MS, (mac:helvetica)

Verdana

Enter @font-face

@font-face is an actual css rule created years ago to embed fonts on a web page. It wasn’t supported by browsers until recently. Now Mozilla and IE support font embedding. I’ve tested in FireFox 3.5 and IE7. It works in both, though I feel IE’s a tad sluggish.

This is a huge step for online typography. Now when clients ask ‘Can we do something about those ugly fonts?” you can say, YES! yes we CAN! It’s a bright day in the web design world. To embed beautiful fonts, all you need is the right font formats and the CSS to get it done. I’m all about handy tools to make life easier, FontSquirrel.com is too, offering prebuilt @font-face kits. This way we know the fonts are legal for your site (check the license for other uses) and the code is already written.

The files that come in each kit.

Your kit comes with all the fonts needed, in the following extensions:

*.woff Web Open Font Format (Mozilla)

*.eot Embedded Open Type (Microsoft)

*.svg Scalable Vector Graphics (XML web graphics iPhone)

*.ttf standard TrueType font

It comes with an external style sheet which defines your fonts for the browser. (stylesheet.css) And it comes with on-page example classes to control the size and line height. (in demo.html)

Since FontSquirrel.com provided little how-to, I wrote a quick walk through with code examples on how to plug it in. Check digitalRenewal.com. Trisha Dingillo is a Chicago based Web Designer. Her site showcasing her work is at digitalRenewal.com.