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/
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).
- Code
- Read more about
font-display
andpreload
- Demo** (4 web fonts—1 preloaded)
- Code
- Read more
- Demo (4 web fonts)
- or using a polyfill—Demo (4 web fonts)
Similar to the above, but without using a class—using only the CSS Font Loading API. This doesn’t require any modification of the CSS, injects the web fonts using JS programmatically. Documented in the Webfont Handbook from @bramstein.
-
Demo (4 web fonts)
-
TODO Related:
.style.fontFamily
method (only works well with one family per page), first saw this in a tweet from @simevidas
- Code
- Read more
- Demo (5 web fonts, two are the same—but only loaded once)
- or using a polyfill—Demo (4 web fonts)
- Code
- Demo (4 web fonts—1
swap
/ 3optional
) ⚠️ This method does not currently have cross-browser support. I’m hoping this will change—learn more.
- Code
- Read more
- Demo (5 web fonts—1 subset)
- or using a polyfill—Demo (5 web fonts—1 subset)
- Code
- Read more
- Demo (5 web fonts—1 subset inline Data URI)
- or using a polyfill—Demo (5 web fonts—1 subset inline Data URI)
- Code
- Read more
- Demo (5 web fonts—1 subset)
- or using a polyfill—Demo (5 web fonts—1 subset)
- 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
- Code: HTML and Lazy-loaded JavaScript
- Read more
- Inspired by the eBay method above.
- Demo (5 web fonts—1 subset) (polyfill is lazy loaded when CSS Font Loading API is not supported)
- Currently in use on zachleat.com and smashingmagazine.com
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
font-display: optional
- System fonts
- Code
- Documentation
- Demo (0 web fonts)
- Unceremonious Web Fonts
- Code
- Documentation
- Demo** (4 web fonts)
- Unceremonious Faux Web Fonts
- Code
- Demo** (1 web font): Bold and italic variants are rendered using font-synthesis
- 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)
⚠️ Inline Data URI⚠️ Asynchronous Data URI⚠️ Anything that injects a new<style>
with@font-face
blocks inside. Really bad repaint cost—seriously, don’t do this.⚠️ font-display: optional
andpreload
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.
- Failed: lazy loading the CSS only delays the start of the FOIT. It does not prevent it.
- Read more at Lazy Loading Web Fonts is Probably Not What You Want
- Code (learn more about asynchronous CSS)
- Demo (4 web fonts)
- 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)
- might be nice to only use web fonts if you can FOUT with
- 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.