Self-host fonts, preload critical ones, and use font-display: swap to avoid invisible or shifting text.
Blocking font loads cause invisible text (FOIT) and late text shifts that worsen LCP and CLS.
BeforeMerge scans your pull requests against this rule and dozens more. Get actionable feedback before code ships.
Web fonts block text rendering by default. Self-hosting removes a third-party round trip, font-display: swap shows fallback text immediately, and preloading the critical font fetches it early.
/* bad: default display blocks text until the font loads (FOIT) */
@font-face { font-family: Inter; src: url(/inter.woff2); }
/* good: render fallback immediately, swap when ready */
@font-face { font-family: Inter; src: url(/inter.woff2) format("woff2"); font-display: swap; }<link rel="preload" as="font" type="font/woff2" crossorigin href="/inter.woff2"> for the above-the-fold font, and subset to the glyphs you use.