Loadingβ¦
Preload key fonts and use font-display: swap so text is never invisible while fonts load.
Web fonts that load late cause either invisible text (FOIT) or a jarring swap (FOUT) that shifts layout. Preloading the critical font and setting font-display: swap shows readable text immediately and reduces layout shift.
crossorigin for woff2).@font-face { font-family: Inter; src: url(/inter.woff2); } /* FOIT: text invisible until loaded */<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>
@font-face { font-family: Inter; src: url(/inter.woff2) format("woff2"); font-display: swap; }Use a "host fonts locally" + preload option (OMGF plugin, or your caching plugin's font settings).
next/font self-hosts, preloads and sets font-display automatically.
Run a free audit and get a prioritized fix list with auto-generated code.
Run a free audit