3 ms·
> Browsers will wait for about 3 seconds for custom fonts to load before showing a fallback font Depends on the `font-display` value on one's `@font-face`, whi
by lelandfe 4y ago
> Browsers will wait for about 3 seconds for custom fonts to load before showing a fallback font
Depends on the `font-display` value on one's `@font-face`, which is where the author's choices of "latency, FOUT, and FOIT" comes from. For instance, Google Fonts uses `swap` by default, meaning the fallback shows right away: https://web.dev/font-best-practices/#choose-an-appropriate-font-display-strategy https://web.dev/font-best-practices/#choose-an-appropriate-f... (I also think Safari's `auto` font-display never shows fallbacks, but that may have changed)
But if you use `optional`, browsers will attempt to get the custom font into the first paint: https://drafts.csswg.org/css-fonts-4/#valdef-font-face-font-display-optional https://drafts.csswg.org/css-fonts-4/#valdef-font-face-font-...
That's often enough. You can go another step further and preload the font, which I generally recommend. This especially helps if the font is otherwise discovered late by the browser.