A Collection of Web Font Loading Recipes

When I originally wrote A Comprehensive Guide to Font Loading Strategies, each strategy included a link to a demo showcasing it working live. For my own maintenance and organizational sanity, I’ve cleaned these demos up a bit and moved them into their own repository on GitHub.

zachleat/web-font-loading-recipes on GitHub

A couple of improvements I’ve added on top of the original code:

• Each demo using a font loading polyfill (usually fontfaceobserver) is now paired with a native CSS Font Loading API demo. The native demos are usually easier to follow—the code is simpler and there isn’t a JavaScript library embedded in the head. As we move forward and support for the CSS Font Loading API increases, we can find more creative ways to serve web fonts to browsers that don’t support it.
• New experiments: Strategies I’m trying out that haven’t made it into The Guide yet.
• Failed experiments: Things I wish had worked. We can learn a lot from failures too. It’s important to document these so we don’t repeat our failures.

Hopefully this is a helpful resource for you to understand the differences between the font loading strategies. It certainly will be a helpful resource for me to stay organized moving forward.