Skip to content

Rule · Lint

@font-face without font-display

lint/font-displaywarnvoid lintupdated

Why it matters

Without font-display browsers hide text for up to 3 seconds while the font downloads (FOIT), delaying text LCP.

How to fix it

Add font-display: swap (or optional for non-brand fonts) and a metric-matched fallback via size-adjust.

Example

css
@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-display: swap;
}

References

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.