Zach’s ugly mug (his face)

Zach Leatherman

The Font Loading Checklist

August 30, 2018 #14 Popular 23,654 Views

When I look back at the last four years that I’ve spent learning everything I could about web fonts and how web fonts load, I can distill it all down to a small checklist of ideals that I continue to chase. Our goal as web developers is to maximize the experience and raise user expectations to the level of what the web is capable of delivering, but also to manage our performance budgets to ensure that we are fulfilling the promise of the web—it’s ubiquity. This checklist should help you deliver on those two often competing ideals.

The Font Loading Checklist

(Start a Web Font load)

Web fonts don’t start downloading until they’re found to be used in content, so it’s often late in the page load. We need to tell the browser to start downloading our high priority web fonts sooner.

(Behavior while a Web Font is loading)

This means absolutely no invisible text. This is known as the flash of invisible text, or FOIT. We can use flash of unstyled text (FOUT) strategies to prioritize system fonts during web font load.

(Reduce Web Font load time)

Guess what: Smaller file downloads finish sooner.

  • Strategy: Use WOFF2 formats (compression built in)
  • Strategy: Subset your fonts, if language and licensing requirements allow.

Check out Glyphhanger to help with both of these strategies.

(Behavior after a Web Font has loaded)

Each independent @font-face block has its own loading life-cycle. Its own FOIT, its own FOUT, its own repaint and reflow. When using two or more web fonts for a single family, its important to group the repaints together to reduce reflow of text on your page.

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

The Problem with font-display and Reflow
TalkScript Episode #14
Lee RobinsonAndy BellLachlan CampbellJody DonettiMaëligZell Liew 🤗
4 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    Yay! I’m really glad to see someone picking up the torch there 🏆

  2. Lee Robinson

    Lee Robinson @leeerob #

    Thank you for your posts on web fonts 🙏 They really helped me learn and understand all the tradeoffs.

  3. Zach Leatherman (away)

    Zach Leatherman (away) @zachleat #

    (sounds good!)

  4. Zell Liew 🤗

    Zell Liew 🤗 @zellwk #

    Let me do what I do best here: Make scary things approachable and friendly :) @zachleat Ok with viewing a preview (when I'm done) before I release the post to the public?

    7 Mentions
    1. #

    2. #

    3. 沖 良矢|世路庵

      沖 良矢|世路庵 @448jp #

      Webフォントを使うときのチェックリスト。 1. プリロードする 2. 常にテキストを読み取れるようにする 3. フォントのファイルサイズを小さくする 4. ページ読み込み後の再描画を最適化する…

    4. #

    5. Rey van den Berg

      Rey van den Berg @ReyTheDev #

      Are you a #webdev?💻 Then you probably use web fonts! Now... are you optimizing your font load strategy for better #performance?🚀 Use this #checklist by the font master, @zachleat, to make sure you're headed in the right direction✅ #css #webperf…

    6. #

      Show original post En esta guía de CSS os enseñaremos las propiedades más útiles que deberías empezar a usar ahora mismo. A continuación explicaremos cada propiedad con un ejemplo básico para que lo puedas comprender de forma visual. Empezamos! Tabla de contenidos Pseudoelementos::before &&… Truncated

    7. Jeremy Keith

      Jeremy Keith #

      Danielle and I have been doing some front-end consultancy for a local client recently. We’ve both been enjoying it a lot—it’s exhausting but rewarding work. So if you’d like us to come in and spend a few days with your company’s dev team, please get in touch. I’ve certainly enj… Truncated

    Social Card Image Preview

    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)