A Comprehensive Guide to Font Loading Strategies

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!


The post we’ve been waiting for from Zach Leatherman. This will be the go-to reference when making tech and UX choices on font loading.

Zach compares 11 current (and future) techniques for loading web fonts, all with live demos. He clearly lists the PRO’s and CON’s for each without making it a novel. Most valuably, he provides a VERDICT on each, which let’s you know if the technique is up-to-par or not.

A winner is declared, but it’s fairly tricky to implement. It requires a “very small subset Roman web font” as a data URL loaded in the head, cached with sessionStorage, and observed for and loaded in stages via class names. The “baseline standard” is “FOUT with a Class” (eliminates the dangerous FOIT), and there are options in there if you really dislike FOUT.

A future-winner is also declared.

Direct Link →