FOIT

FOIT is the flash of invisible text, and the word flash undersells it. For as long as the block period runs, the browser has laid the page out, reserved every line box, and painted no words in them. Nothing is broken and nothing is missing: the text is there, with a font applied that has not arrived yet, and the browser has decided that showing it in anything else would be worse than showing nothing. font-display: block asks for this on purpose, and auto gets it by default in most browsers, which hold for around three seconds before giving up and painting a fallback anyway.

There is one honest case for it. An icon font maps ordinary letters to glyphs, so a fallback paints the letters instead, and a toolbar that briefly reads a b c is worse than a toolbar that is briefly empty. Some teams make the same argument about a logotype set in live text. Everywhere else the trade is a bad one, because content exists to be read and a reader who waits three seconds for a heading on a slow connection has already decided the page is broken. FOUT makes the opposite trade, painting the fallback immediately and paying for it with a reflow, and web font covers the loading story the two of them split between them.

Ending a FOIT is a one-line change. font-display: swap cuts the block period to zero, fallback keeps a block period of about 100 ms and then stops waiting for good, and optional lets the browser abandon the file entirely on a connection that is not going to deliver it in time. Preloading the one or two files above the fold shortens the window without removing it, so it is a complement to a display strategy rather than a substitute for one. This is also one of the few typography faults a build pipeline can catch by itself: the Lighthouse font-display audit flags every face declared without one.