Chapter 33. Web Font Performance: Weighing @font-face Options and Alternatives
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
- 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 (http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax/) of the standard @font-face CSS is used to enable the ...