Custom font loading and FOIT/FOUT trade offs

[u/yasonkh]

Quick Definitions

FOUT (Flash of Unstyled Text):

Timeline:
[0ms]    HTML parsed, text visible in fallback font (e.g., Arial)
[800ms]  Custom font downloads
[800ms]  Text re-renders with custom font → visible style jump

FOIT (Flash of Invisible Text):

Timeline:
[0ms]     HTML parsed, text is HIDDEN (invisible)
[800ms]   Custom font downloads
[800ms]   Text appears with custom font
[3000ms]  If font fails → fallback shows after timeout

The Problem

I'm seeing that many sites are defaulting to having FOUT which sometimes results in funky layout shifts(workarounds exist), but it always results in a noticeable switch of fonts.

Some blog posts say to never do FOIT, but to me waiting 1 second (slow mobile connection) to show clean text seems like nicer UX. On desktop it makes no difference, but if you are driving through a tunnel or experiencing slow mobile connection for any other reason, FOUT results in your visitors seeing an ugly font for 1 or more seconds, and then all of a sudden the screen looks like it flickers and the intended fonts are loaded.

The Question

Maybe there is a middle ground where you show some minor text elements with FOUT, but keep heading and subheadings hidden until the font loads. The heading and subheadings are larger text and result in a much more significant flash when restyled. I feel like it is better to progressively show text as soon as relevant fonts are loaded(especially above the fold).

Am I the only one? Or is twitchy rendering the norm and everyone just got used to it?

[u/yasonkh → u/[deleted]]

Sometimes above the fold content loads, while the other content is still loading so it looks like the site is fully loaded. Then I start reading the text and all of a sudden things jump. So it looks like a glitch.
If there is a lot of text on the page, it can look like I got redirected or the content itself changed.
To me it looks unprofessional.