How do web fonts work?

Until recently, only web-safe system fonts – such as Arial and Georgia – could be used on websites. There was no legitimate way to use standard OpenType or TrueType fonts. Foundries were concerned about using real fonts on the web because existing formats like TrueType don’t provide any real piracy protection. The Embedded OpenType (EOT) format introduced by Microsoft in Internet Explorer 4 was a protected format, but it never really took off because it was a pain to compile the files.

Two key things triggered the web font revolution: the development of the Web Open Font Format (WOFF) in 2009, which is very easy to compile and offers the same protection as an EOT but is much easier to use; and browser support for that file, without which it would be meaningless. Font delivery networks such as Typekit (just acquired by Adobe), Fontdeck, WebINK and Fonts.com Web Fonts found a way of not only delivering these new files, but also the legacy files and TTFs wrapped in a fairly secure delivery method.

Some foundries may enable retrospective downloads of web fonts if you’ve already bought a licence, so it’s worth checking. Typekit has a free plan with some fonts included in that, and a tiered pricing system that provides access to more fonts for a monthly fee, or the option to buy yearly licences. Other services like Fontdeck offer a different pricing model where you purchase individual licences, akin to buying desktop fonts for print.

Distributors including FontShop supply some of their typefaces through Typekit, and will let you buy web font versions of premium typefaces that aren’t available there and either host them yourself or, for full browser support, you can use the option to ‘Send to Typekit’. Minnesota-based Process Type Foundry lets you buy directly and send to Typekit. So you can use premium fonts and have the benefit of being hosted and served securely.

Set-up differs from service to service, but you’ll always end up declaring your web fonts in CSS. If you’re using a service like Typekit or Fontdeck, you’ll be given a line of code to paste into your HTML header. If you’re hosting it on your own server, you need to set it up using the @font-face CSS rule – which you won’t see if you’re using Typekit or Fontdeck.

Then you need to call the font in your CSS. With most services, you simply write in the font family name. Free service Font Squirrel has a generator that outputs the correct file formats and CSS code, but you only need to worry about that if you’re hosting the fonts yourself. When declaring your font family name, always include fall-back fonts for older browsers that can’t load web fonts or in case your hosting service goes down.

Always bear in mind that the vast majority of fonts don’t look that good on Windows. They might look great on a Mac, but if you fire up Windows and Internet Explorer you’ll see how unreadable they are in comparison – so remember to test on multiple machines.

In addition, it’s also worth comparing different font services as the quality can vary – some have fonts that are better for Windows, some are more faithful to the original design and some might be a little bit skewed.