---
title: "`@font-face` without `font-display` (lint/font-display)"
description: "lint/font-display: Without `font-display` browsers hide text for up to 3 seconds while the font downloads (FOIT), delaying text LCP."
canonical: https://void-design.vercel.app/rules/lint/font-display
lastModified: 2026-09-16
---

# `@font-face` without `font-display`

`lint/font-display` · severity **warn** · category Lint · detected by `void lint` and `void audit`

## 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

- https://web.dev/articles/font-display

## More lint rules

`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.

- `img-missing-dimensions` Image without width/height (or fill / aspect-ratio) — [lint/img-missing-dimensions](https://void-design.vercel.app/rules/lint/img-missing-dimensions)
- `image-priority-deprecated` `priority` on `next/image` is deprecated in Next 16 — [lint/image-priority-deprecated](https://void-design.vercel.app/rules/lint/image-priority-deprecated)
- `missing-alt` Image without `alt` — [lint/missing-alt](https://void-design.vercel.app/rules/lint/missing-alt)
- `google-fonts-link` Google Fonts loaded via `<link>` / `@import` — [lint/google-fonts-link](https://void-design.vercel.app/rules/lint/google-fonts-link)
- `too-many-font-families` More than 3 font families loaded — [lint/too-many-font-families](https://void-design.vercel.app/rules/lint/too-many-font-families)
- `script-strategy` Third-party script loads too early — [lint/script-strategy](https://void-design.vercel.app/rules/lint/script-strategy)
- `browser-global-in-render` Browser global (`window`, `document`, `navigator`, `localStorage`) at module scope or during render — [lint/browser-global-in-render](https://void-design.vercel.app/rules/lint/browser-global-in-render)
- `timer-in-render` `setTimeout` / `setInterval` called in a component body — [lint/timer-in-render](https://void-design.vercel.app/rules/lint/timer-in-render)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/font-display`