Zach’s ugly mug (his face) Zach Leatherman

FOIT vs. FOUT, a Side by Side Comparison

October 12, 2017

Prerequisite: not sure what FOUT or FOIT are? Read the definitions on the Web Font Loading Glossary.

Before we continue, check out this demo that showcases the difference between FOIT and FOUT—side by side—in order to more easily compare and constrast the functional differences between the two. Decide for yourself—which feels faster? Which feels more stable? (Keep reading for my opinion)

A few things stuck out to me after playing around with it:

  1. FOUT feels faster, obviously. Instant rendering is faster than a delay.
  2. FOIT feels more stable if you can guarantee your fonts will load before the timeout (note: you can’t). This is likely why I’m seeing more developers gravitating to a font-display: optional (render only if cached) approach.
  3. FOIT with fonts that hit the timeout and render using the fallback feel more unstable that FOUT!
  4. Page stability is greatly increased when you group your repaints (using the CSS Font Loading API or a polyfill).

Context

In researching the history of web font loading behavior, I was struck by how much influence Apple had when they introduced FOIT to the world on WebKit. It’s almost as if two worlds collided, pitting the idealists that believe that a web page should only be rendered in its finished state against the realists that understand network conditions will always necessitate the construction of planes mid-air.

For historical context, here are an anonymized quote from an Apple employee on the earliest discussion I could find (~2009, about six months after FOIT was first introduced):

We might consider displaying something after a timeout, but no way are we going to draw the wrong thing immediately and then flicker to the right thing. That would look terrible.

This quote seems to suggest that FOIT was not introduced to hide the “ugly” fallback fonts, as some developers have suggested. After all, Apple has invested heavily in their own system fonts.

Rather, FOIT was introduced to reduce the jarring visual impact of the transition that swapping to the web font introduces—reflowing text with new metrics (not all fonts are the same size—gasp!) and repainting with a new style. If the system font and web font are metric compatible (meaning they are the same size—which is very rare but some fonts are developed with this in mind), reflow should be non-existent and I am very curious if those original FOIT advocates would still complain about the repaint. My hunch is that the answer is yes—but I’m not sure. If I ever meet them, I’ll be sure to ask!

In retrospect the unintented side effects of hiding text are clear now, primarily because repaints amongst different web fonts for a single typeface are not grouped together by default. This creates race conditions leading to the Mitt Romney Web Font Problem, changing the actual meaning of sentences that mix two or more web fonts together.

Where does this leave us? Hopefully the demo has convinced you that FOIT isn’t really a good default font loading behavior for web browsers. Note that the alternative doesn’t have to be FOUT. It isn’t a dichotomy. There are font loading strategies that eliminate FOIT and greatly reduce FOUT reflow. You can read about those out on my Comprehensive Guide to Font Loading Strategies.


< Newer
A Collection of Web Font Loading Recipes
Older >
A Historical Look at FOUT and FOIT

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and 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 78 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

6 Reposts

Pedro AmadoIndieWeb Avatar for https://cloudfour.comIndieWeb Avatar for https://www.answersglobe.orgIndieWeb Avatar for https://w.vpsman.netIndieWeb Avatar for https://w.vpsman.netIndieWeb Avatar for https://webperformance.recipes
2 Comments
  1. Šime Vidas Disqus

    14 Oct 2017
    “Decide for yourself” at the top. “FOIT isn’t good” at the bottom. This could be a problem, because more people read the top than the bottom of blog posts. 😅
    1. zachleat Disqus

      14 Oct 2017
      That is absolutely a fair point!
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

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)