Font-Face Kits

When you look at common practices for styling fonts on the web, the majority of sites either tend to be minimalistic to preserve consistency or a bit redundant to have it look as nice as possible with stock fonts on every system.

Helvetica

A good example is Helvetica. It’s a beautiful modern typeface, hell, they made a whole documentary about it! Anyway, it’s included in OS X and thus of course a web designer certainly likes to tell the browser to use it if it’s there. Fallback solutions are then often just Verdana, Arial and a system default sans-serif.

Actually, I should still have a copy of Helvetica from when I had a Macbook. Does anyone know to what license I agreed when I got that? Even if I’d null out the drive afterwards I’d probably break the license agreement if I’d copy it over…

Embedding

The alternative to specifying fonts one after the other and hoping that at least one is present is embedding the fonts through CSS. This is similar to specifying images within CSS and has been supported for a long time. However, some inconsistencies hampered making full use of these techniques.

For one, some browsers  support TrueType/OpenType, some only embedded OpenType (EOT), and Firefox 3.6 now comes with something that’s called WOFF. Now, even if you had a license for Helvetica, you could of course not embed it since that would basically give every schmuck the font for free (which they would like about 25€ per variant for). Granted, EOT does not make it trivial to get a regular font file from it but someone who really wants to extract the glyphs will probably be able to.

Font-Face Kits

A very cool solution to the technical as well as legal problems are so called font-face kits for freely licensed fonts. Sites like Font Squirrel provide packages that can simply be copied and pasted into existing CSS files. Since they take care of the obscure things, such as converting to EOT, this can be used by basically any CSS designer without further knowledge about fonts and font formats.

All that’s needed then is to upload the provided font files and change the font-family reference for each instance, in your CSS files, where you would like that font to be used. You can change the whole look of your site in about half an hour, without resorting to ugly hacks such as embedding images.

I liked this solution so much that I converted my blog to Sansation Regular. It’s a bit playful but if you like more conservative typefaces (they have their uses, my desktop isn’t using Sansation…) they have a great selection of featured fonts for that, too.