A web font face has no font-display descriptor

Why it matters

web.dev's guide to optimising Cumulative Layout Shift explains that while a web font downloads, text is either shown in a fallback font and swapped later, or drawn invisibly until the font arrives, and that both can shift the page when the font loads. It names font-display: optional, preloading critical fonts, and fallback-metric adjustments such as size-adjust as ways to reduce that shift.

The CSS Fonts specification makes auto the initial font-display value, leaves its behaviour to the browser, and notes that many browsers behave like block, which draws text invisibly at first.

What to do

1. Open the finding: it shows the stylesheet, font family and up to ten font-face excerpts with their sources and each member page's matching-preload status. Review the full stylesheet for other faces and any size-adjust, ascent-override, descent-override or line-gap-override declarations.
2. Add a font-display descriptor to every @font-face rule of that family. swap shows text at once in a fallback font; optional uses the web font only if it is ready in time, which avoids a later re-layout.
3. For fonts that matter most, consider a <link rel="preload" as="font"> and fallback-metric adjustments to make the swap less visible. These are shown as evidence and remedies, not as separate problems.

When to leave it as it is: If the browser's default is what you want, for example for a small icon font, you can leave it, or declare font-display: auto or block to record that choice: any of the five valid values counts as declared.

What we read

We read the stylesheets that audited pages link with <link rel="stylesheet">, using the bytes the audit retained, up to 1 MiB per file. The check uses the shared stylesheet analysis; it does not fetch font files or render pages.

For each @font-face rule with a readable font-family and src, we look for a font-display line. Only its absence is reported: auto, block, swap, fallback and optional all count as declared, whichever is chosen. A value we cannot read, or a face whose family or source is unclear, marks the pages as not checked rather than clean.

Faces are grouped by stylesheet and family name, compared without regard to letter case. If any face of a family lacks the descriptor, one finding covers that family and shows up to ten face excerpts; its members are the audited pages that link the stylesheet. If a stylesheet cannot be fetched or read in full, its pages are marked as not checked.

Example & evidence

Illustrative example — schematic CSS, not a live audit.

A page of https://bakery.example/ links /assets/main.css and preloads /assets/font.woff2. The stylesheet contains this face:

@font-face {
  font-family: Demo;
  src: url(font.woff2);
  size-adjust: 98%;
}

The face has no font-display line, so the Demo family in this stylesheet is reported; the matching preload and size-adjust are shown as evidence.

@font-face {
  font-family: Demo;
  src: url(font.woff2);
  font-display: swap;
  size-adjust: 98%;
}

A possible correction: declare font-display on the same face. If a page that linked this stylesheet before is missing from the new audit, or the file is cut short, the fix stays unconfirmed.

Confirm & check again

Check for yourself: open the stylesheet in your browser and search each @font-face block for font-display.

Check again: Full audit — Run a new full site audit. A sufficient recheck of the same stylesheet and font family can confirm a fix when no face in that family lacks font-display. Complete evidence from every previously linked page can also confirm that the former family is no longer declared, including after removal of its stylesheet link. A missing, cut-short or unreadable source cannot by itself prove a fix.

Limits & sources

We do not render pages, match selectors, download fonts, or measure invisible text, font swaps, layout shift or loading time, and declaring font-display does not by itself prove a faster or steadier page. Stylesheets pulled in with @import, inline <style> blocks and styles added by JavaScript are not read. Which font-display value suits a font is your choice; only a missing descriptor is reported. A stylesheet outside the audit's retained resource scope remains unchecked.

Confidence: High because the descriptor is found or not found directly in the stylesheet's source.

Sources

• web.dev, Optimize Cumulative Layout Shift — explains that both swapped fallback text and invisible text can shift the page when a web font loads, and lists font-display: optional, preloading critical fonts and fallback-metric overrides such as size-adjust as ways to reduce the shift. Checked 10 October 2026.
• W3C, CSS Fonts Module Level 4 — defines the font-display descriptor with the values auto, block, swap, fallback and optional, makes auto the initial value with browser-defined behaviour, and notes that many browsers default to behaviour similar to block. Checked 10 October 2026.

Editorial review: 1 November 2026