The @font-face snowball

By John Faulds

Håkon Wium Lie's article, CSS @ Ten: The Next Big Thing on A List Apart in August 2007 may have got the (snow)ball rolling, but it seems that it was the announcement of Typekit on May 27 this year which has prompted an avalanche of interest in web fonts. Or maybe I've just woken up to the issue since then and been taking more notice. But I seem to be adding a lot of font and type-related bookmarks lately and thought it would be worth sharing some of them.

Once upon a time, the most popular solution for adding custom fonts to your site's design was sIFR which uses a combination of Flash, javascript and CSS. More recently, there's been quite a bit of talk about Cufón (including how to combine it with @font-face), which uses canvas instead of Flash and aims to be easier to set up than sIFR (which has certainly been my experience with it so far). Type Select is another javascript solution using canvas that I just came across. I haven't tried it myself but it's generated code looks far more verbose than that of Cufón so I'm not sure I will.

But with the recent releases of Firefox 3.5 and Opera 10, now all the major browsers (including Internet Explorer and Safari/Webkit) support @font-face which has meant that there has been a lot more discussion about its usage and the current state of the various technical and legal issues involved (for example at I Love Typography and Nice Web Type). I won't go over all the associated arguments again here as the links here should give you a good coverage (or at least a good introduction).

Typekit is a service aimed at overcoming some of these issues and has rapidly become the most well-known due to the involvement of well-respected industry personalities like Jeffrey Veen (previously of Adaptive Path and Google) but also by being talked about by other industry heavyweights like Andy Clarke and the Carsonified team.

But Typekit is not the only new service out there aiming to give web designers access to a more varied range of fonts to use in their designs. Typotheque has announced their own service, and I recently came across FontDeck, which is also coming soon. But it seems they were all (including Typekit) beaten to the punch by Kernest which is already up and running.

Font Squirrel has taken a different approach by providing a collection of @font-face bundles that inclues stylesheet examples and EOT files for IE compatbility. The fonts they're providing have licences that they've 'interpreted' to permit font embedding by they make “no guarantee that our interpretation of each license is correct (since most have no @font-face clause).”

Of course, there's nothing stopping you providing non-standard fonts with better CSS font stacks (not forgetting how these apply on different operating systems), and using 24Way's Font Matrix can help you determine just how likely a site visitor is to have your chosen fonts installed.