Zach’s ugly mug (his face) Zach Leatherman

Web Fonts are ▢▢▢ Rocket Science

February 12, 2018 Watch in 47 minutes

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.
SmashingConf London — Zach Leatherman on ‘Web Fonts are ▢▢▢ Rocket Science’ from Smashing Magazine on Vimeo.


  • 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

Originally posted at:

Screenshot image for

< Newer
“A letter about Google AMP”
Older >
Introducing Eleventy, a new Static Site Generator

Zach Leatherman IndieWeb Avatar for a builder for the web and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 81 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

Shamelessly plug your related post

These are webmentions via the IndieWeb and

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)