A bunch of demos for different web font loading strategies. Companion to https://www.zachleat.com/web/comprehensive-webfonts/ Read more: https://www.zachleat.com/web/recipes/
Switch branches/tags
Nothing to show
Clone or download
Latest commit ba83cbe Apr 20, 2018
Permalink
Failed to load latest commit information.
font-lato This is in a good state now. Oct 19, 2017
.gitignore Ignore Oct 18, 2017
.htaccess Initial commit Oct 18, 2017
LICENSE Initial commit Oct 18, 2017
README.md Deprecated Apr 20, 2018
async-data-uri.css Deprecated methods Oct 18, 2017
async-data-uri.html This is in a good state now. Oct 19, 2017
asynchronous-css.css Adds asynchronous css approach Mar 28, 2018
asynchronous-css.html Adds asynchronous css approach Mar 28, 2018
critical-foft-data-uri-polyfill.html Adds longer timeout for polyfilled web fonts, default was 3 seconds :O Apr 6, 2018
critical-foft-data-uri.html This is in a good state now. Oct 19, 2017
critical-foft-polyfill.html Adds longer timeout for polyfilled web fonts, default was 3 seconds :O Apr 6, 2018
critical-foft-preload-fallback-optional.html Add swap to the compromise Apr 8, 2018
critical-foft-preload-fallback-optional.js Adds the eBay Method. Apr 8, 2018
critical-foft-preload-polyfill.html Adds longer timeout for polyfilled web fonts, default was 3 seconds :O Apr 6, 2018
critical-foft-preload.html This is in a good state now. Oct 19, 2017
critical-foft.html This is in a good state now. Oct 19, 2017
dont.html This is in a good state now. Oct 19, 2017
ebay-method.html Title correction Apr 9, 2018
ebay-method.js Adds the eBay Method. Apr 8, 2018
failed-supports.html Documenting a few experiments Oct 19, 2017
foft-polyfill.html Adds longer timeout for polyfilled web fonts, default was 3 seconds :O Apr 6, 2018
foft.html This is in a good state now. Oct 19, 2017
font-display-mix.html This is in a good state now. Oct 19, 2017
font-display-optional-preload.html Adds `font-display: optional` strategies Apr 20, 2018
font-display-optional.html Adds `font-display: optional` strategies Apr 20, 2018
font-display-preload.html Add font-display + preload demo Mar 28, 2018
font-display.html This is in a good state now. Oct 19, 2017
font-feature-values.html This is in a good state now. Oct 19, 2017
fout-with-class-polyfill.html Adds longer timeout for polyfilled web fonts, default was 3 seconds :O Apr 6, 2018
fout-with-class.html This is in a good state now. Oct 19, 2017
inline-data-uri.html This is in a good state now. Oct 19, 2017
preload.html This is in a good state now. Oct 19, 2017
unceremonious-faux-font-face.html This is in a good state now. Oct 19, 2017
unceremonious-font-face-woff2-only.html Documenting a few experiments Oct 19, 2017
unceremonious-font-face.html This is in a good state now. Oct 19, 2017
variablefont-fout-test.html Documenting a few experiments Oct 19, 2017

README.md

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—notably 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: swap

preload

font-display: swap with preload

FOUT with a Class

FOFT

FOFT using only font-display (mix font-display values)

  • Code
  • Demo (4 web fonts—1 swap / 3 optional)
  • ⚠️ This method does not currently have cross-browser support. I’m hoping this will change—learn more.

Critical FOFT

Critical FOFT with Data URI

Critical FOFT with preload

The eBay Method

  • Code: HTML and Lazy-loaded JavaScript
  • Emulate font-display: optional with JavaScript.
    • Notable that it lazy loads the font loading polyfill only if CSS Font Loading API is not supported
  • Read more at eBay’s Font Loading Strategy.
  • Demo (4 web fonts) (polyfill is lazy loaded when CSS Font Loading API is not supported)

“The Compromise”: Critical FOFT with preload, with a polyfill fallback emulating font-display: optional

Experiments in Progress

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

  • Metric compatible web fonts
    • Show how fonts can look without FOUT reflow if they are metric compatible.
  • FOUT metric matching with a Variable Font
    • Reduction in FOUT reflow (reduce text movement on web font render)
    • Related: Font style matcher from @notwaldorf
  • FOUT without a class
    • .style.fontFamily method (only works well with one family per page), first saw this in a tweet from @simevidas
    • CSS Font Loading API .add() method: 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

  • font-display: optional
    • A little harsh to put this in the Not Recommended section but I like my web fonts on an empty-cache visit 😎
    • Code
    • Demo** (4 web fonts)
  • System fonts
  • Unceremonious Web Fonts
  • Unceremonious Faux Web Fonts
  • Unceremonious Web Fonts, WOFF2 Only (Cutting the Mustard)
    • Code
    • 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)

Anti-patterns and Deprecated Methods

Failed Experiments

🚫 Asynchronous CSS

This is a common thing people try—they asynchronously load the CSS (and only the CSS). Heck, I used this behavior before I started studying web font loading.

🚫 @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.
  • Code
  • Demo

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