HTML Guides for @font-face

The font-display descriptor in an @font-face rule has a value that isn't one of its keywords, so browsers ignore it and load the font with the default auto behavior.

font-display decides what the browser shows while a web font downloads: invisible text for a short time, a fallback font that is swapped out later, or the fallback for good if the web font arrives too late. It accepts five keywords, written without quotes: auto, block, swap, fallback and optional.

Quoting the value is the usual cause. font-display: "swap" looks harmless, but the quotes turn the keyword into a CSS string, and a string is not a valid value. Typos and invented words such as fast trigger the same message.

The browser drops the invalid declaration and uses auto, which leaves the loading strategy up to the browser, usually a short period of invisible text. A rule written with "swap" to keep text visible while the font loads ends up without that guarantee.

To fix it, remove the quotes and use one of the five keywords. If the @font-face rules come from a plugin, a theme or a build step, change the setting there, because edits to the generated CSS are lost on the next build.

Invalid example

<style>

@font-face {

font-family: "Inter";

src: url("/fonts/inter.woff2") format("woff2");

font-display: "swap";

}

</style>

Valid example

<style>

@font-face {

font-family: "Inter";

src: url("/fonts/inter.woff2") format("woff2");

font-display: swap;

}

</style>