running words around
design education and visual communication
authored by chris m hughes

@font-face : Web Fonts & the Holy Grail

Tuesday, 23 June 2009

It may seem like the web has come along way since Tim Berners-Lee cranked out the first pages of html, but in the terms of typography, we are still stuck with a limited set of core web fonts. So it's no wonder that being able to display any font you want, without resorting to image files, has become the Holy Grail for many web designers.

Linking fonts via CSS is the obvious solution, and has actually been around for a while. But it's not heavily used because of poor browser support for the TrueType format, and the fact that only free (and unreliable) fonts can be used. So the core fonts, combined with image files (with image replacement CSS), remain the norm despite the inherent shortcomings.

With the WC3's new CSS3 definitions, font linking is referred to as 'web fonts' and the new crop of major browsers, including Firefox 3.1 and Safari 4, fully support the preferred formats, TrueType (.ttf) and OpenType (.otf). So you'd be forgiven for thinking that its finally been cracked, and soon we'll all be displaying the typography we want you to see.

But there is still the tricky problem of the legal situation with type foundries. Understandably, type designers approach their work just like musicians, and want to protect their creations, so copyright is a big issue for them. Hence, a majority of fonts that you might want to use are not available without license.

So enter Typekit, who have developed a web-only font linking license. Typekit hosts both free and commercial fonts 'in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers.' And all it will take is a simple line of JavaScript in the markup and the @font-face descriptor.

If it can deliver what it is promising, Typekit could be at the cusp of a major breakthrough in web design.

- For more information, check out the Typekit website.
- For a review of Typekit's technology, visit MikeIndustries blog.
- More about CSS3 - see my blog post about RGBa and CSS3.