Web Fonts are ▢▢▢ Rocket Science

Web fonts can be tricky—but are they rocket science? Web browsers have decided to make them invisible while they’re loading to avoid rendering system fonts to users. In order to properly manage the performance of our web fonts, we respectfully disagree with that decision. Roll up the sleeves on your lab coat, y’all.

In this talk, we discuss practical ways to stabilize the four main pillars of proper font loading:

1. Avoiding invisible text.
2. Triggering downloads sooner.
3. Grouping repaints to reduce reflow.
4. If you make font files smaller, they load faster.

Timestamps

• 01:25 The Mitt Romney Web Font Loading Problem
• 03:08 The Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT)
• 07:15 The History of @font-face Loading Behavior
• 13:10 @font-face Syntax
• 15:18 font-display for FOUT
• 18:08 font-synthesis as a tool for better FOUT
• 21:11 Using Faux Pas to detect font-synthesis: faux-pas and node-faux-pas
• 24:25 preload
• 25:30 The FOUT with a Class font loading strategy (for broadly supported, robust font loading)
• 30:43 Critical FOFT with a Data URI
• 32:39 Subsetting web fonts, Glyphhanger
• 35:12 Variable Fonts