Webfonts and performance

Howdy, perfers! I recently had a significant webfont problem on some client work and had to really sink my teeth into the problem to resolve it properly. I found some great resources that helped me fix it in no time. Hopefully they’re as useful to you as they were to me.

Font events

Filament Group wrote up an excellent walk-through on how they eliminated the Flash of Invisible Text (FOIT) on their company website. I have always considered the Flash of Unstyled Text (FOUT) a feature of the web, not an eyesore to be avoided. Unfortunately it’s a minority opinion, and the browser makers intentionally implemented FOITs before a font has loaded to appease the majority. See how you can reclaim that FOUT and build a progressively enhanced site:

Font Loading Revisited with Font Events

Mitt Romney webfont problem

Just a few days ago Zach Leatherman wrote about the Mitt Romney webfont problem, showing how the default behavior of webfont loading can cause major problems with content. He highlights how using two webfonts within prominent content (like a headline) can cause confusion. One could easily argue that this is not only a PE or performance issue, but a journalism integrity issue.

Mitt Romney webfont problem

Font observer libraries

Several libraries consistently get mentioned in these articles. Two of them do the same job: add a class to your HTML after verifying that a font has been downloaded by the browser. The third is loadCSS, a lightweight tool for asynchronously fetching CSS. With these tools in hand, you should qualify any styles that rely on webfonts with one or more loaded classes, which will allow you to avoid every having invisible text on webpages. The two observer libraries do their job slightly differently, so just pick the one that more directly addresses your needs.

fontfaceobserver on GitHub fontfaceonload on GitHub

Bringing it all together…

I suppose this post could have been titled “Heed the words of Zach” because the final link is his Velocity presentation, which cohesively ties the previous articles and tools into one message. While each stood on their own, the slides make it completely convincing when weaved together into a single story.

Performance and Usability of Font Loading