Once again Steve Souders proves why he is the go-to source for website performance in this in-depth study on how @font-face affects website performance.

The main obstacles are FOUT (in FF) and what I will call a “page-blocker” in IE (until all font files finish downloading, IE displays nothing but a white page, even if the font is not used on the current page…), both of which are big issues, but clearly IE’s is HUGE!

There is good news, too, in that font files apparently do not block parallel downloads, as JS files do, they are cachable, and they are GZipable.

Steve naturally offers a few recommendations…

1. Only use @font-face is you’re absolutely certain you need it.
2. If you have multiple font files, consider sharding them across multiple domains.
3. Don’t include unused @font-face declarations – IE will download them whether they’re used or not.
4. Gzip the font files and give them a future Expires header.
5. Consider lazy loading the font files, at least in IE.

…then, in a reply in the Comments tries to get the standardizing talks going with…

• FOUT – I agree with the comments from Paul Irish and Remy Sharp in Paul’s blog post. The browser doesn’t render the text while it waits for the font file to download (this is what Safari and Chrome do now). But there’s a short timeout (250ms) after which the text is rendered in a default font. If/when the font file finishes downloading, the text is re-rendered.
• Timeout – All the browsers need to follow Safari’s lead and terminate requests after 60 seconds. I was surprised to see this indefinite wait also happens for images.
• Busy Indicators – I would vote that Browsers shouldn’t trigger busy indicators for font files. Or at least should turn them off after a short time (10-60 seconds).

…before pitching it back to us with…
“What else?”

So, “what else” oh font-happy readers?

The first tip I would add to developers is to create a thoughtful font-stack so that whether your font is delayed in arriving, or never arrives at all, if the user doesn’t get to see your primary font, they will see a relatively-close font. I’m not talking as much about the style of the font as I am about the spacing of the font. My reason being that if the spacing of the font is similar, if your font is delayed, the jump to the user’s eye will be minimal and, ideally, there will be little, if any, page re-rendering needed…

Happy fonting,
Atg

Top⇪