# CSS: “font-display”: X is not a “font-display” value.

> Canonical HTML version: https://rocketvalidator.com/html-validation/css-font-display-x-is-not-a-font-display-value
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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

```html
<style>
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter.woff2") format("woff2");
    font-display: "swap";
  }
</style>
```

## Valid example

```html
<style>
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter.woff2") format("woff2");
    font-display: swap;
  }
</style>
```