Skip to content

Latest commit

 

History

History
246 lines (165 loc) · 13.4 KB

README.md

File metadata and controls

246 lines (165 loc) · 13.4 KB
Raw

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/

Table of Contents

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

FOUT

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. I first saw this method in the Webfont Handbook from @bramstein.

  • JavaScript: CSS Font Loading API
  • Code
  • Demo (4 web fonts)
  • Related: .style.fontFamily method (only works well with one family per page), first saw this in a tweet from @simevidas

FOFT

Two stage load, using one Roman font file in the first stage (with font-synthesis).

Critical FOFT

Critical FOFT with Data URI

Critical FOFT with preload

The eBay Method

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

Further Enhancements

These aren’t necessarily font loading strategies on their own but they are extra enhancements you can layer on top of and pair with existing strategies.

Network Information API

Opt out of web fonts on slow connection speeds.

prefers-reduced-motion User Preference

Opt out of web fonts when user has enabled Reduce Motion accessibility preference.

save-data User Preference

Opt out of web fonts when user has enabled Data Saver mode.

Experiments in Progress

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

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

C’mon. 😇

Unceremonious Web Fonts

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. We’re anti-invisible text here, but this approach is worth mentioning.

Unceremonious Faux Web Fonts

font-synthesis is not a good end-product.

Anti-patterns and Deprecated Methods

⚠️ Inline Data URI

⚠️ Asynchronous Data URI

⚠️ <style> Injection

Anything that uses JavaScript to inject a new <style> with @font-face blocks inside. Really bad repaint cost—avoid this. This is used in the Asynchronous Data URI method above but is also common in worse-performing methods too.

⚠️ font-display: optional and preload

⚠️ FOFT using only font-display (mixing font-display values across a font-family)

This method does not currently have cross-browser support. I’m hoping this will change—learn more.

  • Code
  • Demo** (4 web fonts—1 swap / 3 optional)

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

🚫 font-family Stack

  • Put two or more font-family web fonts in a single font-family stack.

  • Failed: The font matching algorithm selects the first web font that matches and attempts to load it (ignoring subsequent web font families). Even if you preload the subset first stage, it’ll swap over due to font-family order priority.

  • Code

  • Demo

  • Update: While you can mitigate the above problem with font-display, perhaps modifying the order of the font-family stack and @font-face block ordering, there are still problems with removing the unnecessary subset web font from the page after the larger version has loaded. Font features that occur with glyphs that cross these font file boundaries will be broken (kerning, ligatures, et cetera). Relatedly, you cannot remove a CSS-paired FontFace object using the CSS Font Loading API (per the specification).

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