• I'm a full stack developer at Fasterize
• twitter : @AnthoBarre
• github : abarre

• 
• Fasterize is an all-in-one website accelerator.
• It is an automated web performance optimization service (SAAS) used by many high traffic websites.
  Fasterized websites are already HTTP/2 enabled and take fully part of the next gen web.

What is the state of the art for font optimization ?

The presentation is based on works of studies done at Fasterize

Analysis based on work of Zach Leatherman
Analysis based on work of Bram Stein

We looked at the font loading performed by our main customers in the french ecommerce

Test with and without loading the fonts

A web font is only downloaded when it is used in a CSS selector that matches a DOM connected node with text.

Caution: italic and bold variations trigger different font download.

The browser chooses the format according to the ordered list of sources

• Loading font on Safari is kind of a SPOF
• Nice default in term of performance for Microsoft browsers
• Default timeout of 3 sec is very long
• Bandwidth is consumed during the critical path

FOUT is progressive enhancement

New bulletproof @font-face: WOFF + WOFF2. Done.

Subsettings : keep latin subset and unicode-range descriptor

• font-display: block hides the text until the font is loaded (FOIT)

• font-display: swap shows fallback font until the font is loaded (FOUT)

• font-display: fallback will replace the fallback font only within a timeout

• font-display: fallback will replace the fallback font only within a timeout

• font-display: optional will load the font only if cached

• font-display: optional will load the font only if cached

VERDICT: NO HARM IN ADDING NOW, BUT NOT ENOUGH FOR THE MOMENT.

VERDICT: NOT SUFFICIENT

1. Trigger a font download with the CSS Font Loading API

2. Observe font download in CSS via the Font Face Observer lib

VERDICT: THIS IS THE BASELINE STANDARD. THIS WILL WORK FOR MOST USE CASES

The ultimate goal is to avoid FOIT and mostly eliminate FOUT.

• Create a critical FONT with a romain weight, normal style and containing A-Z and optionally 0-9 and/or punctuation)
• Lazyload other weights and styles and take advantages of faux-bold and faux-italic content (using font synthesis)

VERDICT: THIS IS THE CURRENT GOLD STANDARD.

1. Fonts are enhancement
2. The default browser behavior for font-loading is harmful to the perceived performance
3. FOUT is a progressive enhancement
4. Be prepared for the future : font-display and link rel="preload" of the regular fonts
5. FOUT with class offers a good threshold