---
title: "Text invisible while the font loads (perf/font-display)"
description: "font-display: block (or auto, or no font-display in @font-face) hides text for up to 3s while the web font downloads (Lighthouse: \"Ensure text remains visible during webfont load\")."
url: http://localhost:4173/rules/perf/font-display
updated: 2026-11-11
---

# Text invisible while the font loads

> `perf/font-display` is a vetd rule. It flags: Text invisible while the font loads. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `perf/font-display` |
| Severity | warning |
| Group | Performance: fonts, images, scripts and bundle |
| Tags | performance, lighthouse |

## Why it matters

font-display: block (or auto, or no font-display in @font-face) hides text for up to 3s while the web font downloads (Lighthouse: "Ensure text remains visible during webfont load").

## How to fix it

font-display: swap (or optional for body text); in next/font, keep the default display: "swap".

## Credit

Based on work by:

- [Google Chrome](https://developer.chrome.com/docs/lighthouse/overview): Lighthouse flags web fonts that keep text invisible during loading and recommends font-display: swap.

## References

- [Ensure text remains visible during webfont load](https://developer.chrome.com/docs/lighthouse/performance/font-display), Chrome for Developers
- [Optimize WebFont loading and rendering](https://web.dev/articles/optimize-webfont-loading), web.dev
- [font-display CSS at-rule descriptor](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face/font-display), MDN Web Docs

## See it

Demos in the vetd Lab:

- [Load fonts without shift](http://localhost:4173/lab/web-perf/font-loading-without-shift)

## Related rules

- [`perf/font-link`](http://localhost:4173/rules/perf/font-link.md)
- [`perf/font-format`](http://localhost:4173/rules/perf/font-format.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "perf/font-display" }`. CLI: `npx vetd explain perf/font-display`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`perf/font-link`](http://localhost:4173/rules/perf/font-link.md) · Next: [`perf/font-format`](http://localhost:4173/rules/perf/font-format.md)