Web Fonts are ▢▢▢ Rocket Science

A presentation at Concatenate in in Lagos, Nigeria by Zach Leatherman

(This is the 25 minute version of this talk)

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.

Buzz and feedback

Here’s what was said about this presentation on Twitter.