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 th…

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.

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.


Print Share Comment Cite Upload Translate
APA
Zach Leatherman | Sciencx (2024-03-29T10:35:13+00:00) » A Collection of Web Font Loading Recipes. Retrieved from https://www.scien.cx/2017/10/19/a-collection-of-web-font-loading-recipes/.
MLA
" » A Collection of Web Font Loading Recipes." Zach Leatherman | Sciencx - Thursday October 19, 2017, https://www.scien.cx/2017/10/19/a-collection-of-web-font-loading-recipes/
HARVARD
Zach Leatherman | Sciencx Thursday October 19, 2017 » A Collection of Web Font Loading Recipes., viewed 2024-03-29T10:35:13+00:00,<https://www.scien.cx/2017/10/19/a-collection-of-web-font-loading-recipes/>
VANCOUVER
Zach Leatherman | Sciencx - » A Collection of Web Font Loading Recipes. [Internet]. [Accessed 2024-03-29T10:35:13+00:00]. Available from: https://www.scien.cx/2017/10/19/a-collection-of-web-font-loading-recipes/
CHICAGO
" » A Collection of Web Font Loading Recipes." Zach Leatherman | Sciencx - Accessed 2024-03-29T10:35:13+00:00. https://www.scien.cx/2017/10/19/a-collection-of-web-font-loading-recipes/
IEEE
" » A Collection of Web Font Loading Recipes." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2017/10/19/a-collection-of-web-font-loading-recipes/. [Accessed: 2024-03-29T10:35:13+00:00]
rf:citation
» A Collection of Web Font Loading Recipes | Zach Leatherman | Sciencx | https://www.scien.cx/2017/10/19/a-collection-of-web-font-loading-recipes/ | 2024-03-29T10:35:13+00:00
https://github.com/addpipe/simple-recorderjs-demo