web-font-loading-recipes

A bunch of demos for different web font loading strategies. Some of these are included on A Comprehensive Guide to Font Loading Strategies, some of them are more experimental.

Demos are hosted at https://www.zachleat.com/web-fonts/demos/

Recommended Methods

As web fonts are a progressive enhancement and with increasing support for the CSS Font Loading API, we can look forward to a time in which we won’t need to inline a polyfill into the header (for even faster font loading). The simplified CSS Font Loading API recipes are the defaults, but polyfilled versions are included for broader browser support. In practice this means only the polyfilled versions will show web fonts in Internet Explorer and Edge web browsers (which do not have support for the CSS Font Loading API).

• font-display
  • Documentation
  • Demo** (4 web fonts)
• preload
  • Documentation
  • Demo** (4 web fonts—1 preloaded)
• FOUT with a Class
  • Documentation
  • Demo (4 web fonts)
  • or using a polyfill—Demo (4 web fonts)
• FOFT
  • Documentation
  • Demo (5 web fonts, two are the same—but only loaded once)
  • or using a polyfill—Demo (4 web fonts)
• FOFT using only font-display
  • Demo (4 web fonts—1 swap / 3 optional)
• Critical FOFT
  • Documentation
  • Demo (5 web fonts—1 subset)
  • or using a polyfill—Demo (4 web fonts)
• Critical FOFT with Data URI
  • Documentation
  • Demo (5 web fonts—1 subset inline Data URI)
  • or using a polyfill—Demo (5 web fonts—1 subset inline Data URI)
• Critical FOFT with preload
  • Documentation
  • Demo (5 web fonts—1 subset)
  • or using a polyfill—Demo (5 web fonts—1 subset)

Experiments in Progress

You’ll probably see blog posts on these at some point.

• FOUT metric matching with a Variable Font
  • Reduction in FOUT reflow (reduce text movement on web font render)
  • Related: Font style matcher from @notwaldorf
• Emulate font-display: optional with JS (the eBay method)
  • Notable in that it lazy loads the font loading polyfill only if the CSS Font Loading API is not supported
• (To be named) Any recommended non-polyfilled recipe above with one slight variation: it uses the eBay method if the CSS Font Loading API is not supported (in practice this means font-display: optional only on IE/Edge). This is what I’m currently doing on zachleat.com.
• FOUT without a class
  • Doesn’t require any modification of the CSS, injects the web fonts using JS programmatically (the Asynchronous Data URI method below also does this). Documented in the Webfont Handbook from @bramstein.

Not Recommended but included for Posterity

• System fonts
  • Documentation
  • Demo (0 web fonts)
• Unceremonious Web Fonts
  • Documentation
  • Demo** (4 web fonts)
• Unceremonious Faux Web Fonts
  • Demo** (1 web font): Bold and italic variants are rendered using font-synthesis
• Unceremonious Web Fonts, WOFF2 Only (Cutting the Mustard)
  • Old browsers used to render FOIT without a timeout, which in practice made web fonts a single point of failure. Using WOFF2 only cuts the mustard to modern browsers that have a three second FOIT timeout for web fonts. Three seconds is still way too long for me to implement this in production, but it’s worth noting.
  • Demo** (4 web fonts)

Deprecated Methods

• Inline Data URI
  • Documentation
  • Demo (4 web fonts)
• Asynchronous Data URI
  • Documentation
  • Demo (4 web fonts)
• Anything that injects a new <style> with @font-face blocks inside. Really bad repaint cost—seriously, don’t do this.

Failed Experiments

• @supports and font-display
  • Reasons for trying:
    • might be nice to only use web fonts if you can FOUT with font-display
    • might be nice to have FOUT with a class if font-display not supported (and work well without JS dependencies)
  • Failed: @supports doesn’t work with font-face descriptors.
  • Demo

---

** Take note that these methods will FOUT in Internet Explorer and Edge by taking advantage of their default font loading behavior.