In doing some cursory performance auditing on the site I work on, I came across a recommendation to ensure text remains visible during webfont load on Google's PageSpeed Insights, to prevent a Flash of Invisible Text (FOIT).

Some modern browsers hide text if the font the text is supposed to be using hasn't loaded yet. Different browsers handle this in different ways; Chrome and Firefox will hide text for up to 3 seconds, then show a fallback system font if the custom font still isn't ready. Edge shows a system font right away, until the custom font is loaded, and then swaps it in. Safari hides the text until the font is ready - with no fallbacks for if the custom font fails to load for whatever reason.

I've started to notice this recently on certain sites recently but didn't realize it was a thing until today.

Digging in a little more, I learned that FOIT has a friend named FOUT: Flash of Unstyled Text. I'm familiar with FOUT and hadn't realized that browser behavior had evolved to make FOIT a bigger deal than FOUT. As Malthe Milthers explains, browser behavior used to mostly cause FOUT, and developers came up with all sorts of creative solutions in response. The browser-builders took notice, and built features in to the browsers to do what they thought the developers wanted - hide text until its font is ready. But then developers were still unhappy! So now we have workarounds to solve for FOIT.

Malthe writes:

"Picking a strategy is essentially about finding a balance between performance and design. This is where different strategies may be correct on different projects. At the moment I think we’re trying to find a golden go-to solution, which may not exist. Too many factors play into the decision. What fonts are being used? how big are they? How important is the design to the user experience? How big is the budget? and so on.

The trend that we’re currently seeing among performance-minded developers, is to emulate the behaviour from Explorer across all browsers. The belief here is that “Content is king” and should be served to the user as fast as possible. If that means showing a fallback font first, and then swap the fonts when they’re ready, so be it. Even if it is causing a reflow on the page. We’re essentially choosing a 0 second block period, and an infinite swap period."

Malthe goes on to talk about how designers might prefer a different outcome, and that therefore there is no one right answer - it depends on what your project's needs are. And, maybe it is all moot if your fonts are going to take a very long time to load. Malthe has solutions there too! Go read them.