Chapter 33. Web Font Performance: Weighing @font-face Options and Alternatives

Dave Artz

Web fonts are a key ingredient in today’s website designs; at my employer (AOL) it is a given that redesigns will feature downloadable fonts. The days of maintaining a sprite full of graphic text headlines are behind us. We’ve moved on—but what approach yields the best performance?

The goal of this chapter is to look at the various web font implementation options available, benchmark their performance, and arm you with some useful tips in squeezing the most bang for your font byte. I will even throw in a new font loader as a special bonus!

Font Hosting Services Versus Rolling Your Own

There are two approaches you can take to get licensed, downloadable fonts on to your web pages: font hosting services and do-it-yourself (DIY).

Font hosting services

Typekit,, Fontdeck, etc., provide an easy interface for designers to manage fonts purchased, and generate a link to a dynamic CSS or JavaScript file that serves up the font. Google even provides this service for free. Typekit is the only service to provide additional font hinting to ensure fonts occupy the same pixels across browsers.

The DIY approach

This involves purchasing a font licensed for web use, and (optionally) using a tool like FontSquirrel’s generator to optimize its file size. Then, a cross-browser implementation ( of the standard @font-face CSS is used to enable the ...

Get Web Performance Daybook Volume 2 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.