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:
- Avoiding invisible text.
- Triggering downloads sooner.
- Grouping repaints to reduce reflow.
- If you make font files smaller, they load faster.
SmashingConf London — Zach Leatherman on ‘Web Fonts are ▢▢▢ Rocket Science’ from Smashing Magazine on Vimeo.
Timestamps for ContentPermalink to 'Timestamps for Content'
01:25The Mitt Romney Web Font Loading Problem
03:08The Flash of Invisible Text (FOIT) and Flash of Unstyled Text (FOUT)
07:15The History of @font-face Loading Behavior
font-synthesisas a tool for better FOUT
21:11Using Faux Pas to detect
font-synthesis: faux-pas and node-faux-pas
25:30The FOUT with a Class font loading strategy (for broadly supported, robust font loading)
30:43Critical FOFT with a Data URI
32:39Subsetting web fonts, Glyphhanger