Wednesday, October 14th, 2009
Our favorite ex-Yahoo at-Google web performance fast-driving all-around guru Steve Souders took a look at @font-face performance recently:
There have been a number of great posts about @font-face performance issues:
This blog post summarizes Paul, Stoyan, and Zoltan’s findings plus some very important discoveries of my own.
Among these discoveries is:
* IE doesn’t render anything in the page until the font file is done downloading.
* In all major browsers, …no files were blocked [by font downloads].
* Busy indicators… are triggered [differently in each] browser
Steve also found that IE and Chrome didn’t time out in their attempts to download a font, meaning in the case of the former that the page never displays while waiting for the font, and in the latter that the text doesn’t display.
Steve’s conclusions are interesting:
* Only use @font-face is you’re absolutely certain you need it.
* If you have multiple font files, consider sharding them across multiple domains.
* Don’t include unused @font-face declarations – IE will download them whether they’re used or not.
* Gzip the font files and give them a future Expires header.
* Consider lazy loading the font files, at least in IE.
Posted by Ben Galbraith at 6:00 am