Validación HTML: CSS: "font-display": La propiedad "font-display" no existe.

Acerca de este problema de CSS

font-display controla cómo se muestra una fuente basándose en si ha sido descargada y está lista para usar. Sus valores aceptados — auto, block, swap, fallback y optional — determinan el comportamiento durante la línea temporal de carga de fuentes (período de bloqueo, período de intercambio y período de fallo). Debido a que gobierna el comportamiento de carga de una definición de fuente, solo tiene sentido dentro de una regla @font-face, no como una propiedad aplicada a un elemento HTML.

Cuando colocas font-display dentro de un selector regular como body o .heading, el validador CSS correctamente lo marca como una propiedad desconocida. Los navegadores lo ignorarán silenciosamente, lo que significa que tu estrategia de carga de fuentes prevista no tendrá efecto. Los usuarios pueden experimentar un destello de texto invisible (FOIT) u otro comportamiento no deseado porque el navegador recurre a su estrategia de font-display por defecto.

Por qué esto importa

Rendimiento de carga de fuentes: Sin un descriptor font-display válido en tu regla @font-face, pierdes el control sobre cómo el navegador maneja la renderización de texto mientras se cargan las fuentes personalizadas. Usar font-display: swap, por ejemplo, asegura que el texto permanezca visible con una fuente de respaldo hasta que la fuente personalizada esté lista — una práctica clave de rendimiento web.
Cumplimiento de estándares: La especificación CSS Fonts Module Level 4 define font-display exclusivamente como un descriptor de @font-face. Usarlo en otro lugar produce CSS inválido.
Fallo silencioso: Los navegadores no lanzarán errores visibles — simplemente ignoran la propiedad inválida, lo que puede dificultar diagnosticar por qué tu comportamiento de carga de fuentes no funciona como esperabas.

Cómo solucionarlo

Elimina font-display de cualquier regla CSS regular (selectores como body, h1, .class, etc.).
Añade font-display dentro de la regla @font-face donde defines tu fuente personalizada.
Si estás cargando fuentes a través de un servicio de terceros (como Google Fonts), a menudo puedes añadir un parámetro &display=swap a la URL de la fuente en lugar de escribir tu propio bloque @font-face.

Ejemplos

❌ Incorrecto: `font-display` usado como propiedad CSS

body {
  font-family: "Open Sans", sans-serif;
  font-display: swap;
}

Esto desencadena el error del validador porque font-display no es una propiedad CSS válida para selectores de elementos.

✅ Correcto: `font-display` usado dentro de `@font-face`

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans.woff2") format("woff2"),
       url("/fonts/open-sans.woff") format("woff");
  font-display: swap;
}

body {
  font-family: "Open Sans", sans-serif;
}

Aquí, font-display: swap está correctamente colocado dentro de la regla @font-face, diciéndole al navegador que renderice inmediatamente el texto con una fuente de respaldo y luego intercambie con “Open Sans” una vez que termine de cargar.

✅ Correcto: usando `display=swap` con Google Fonts

Si usas Google Fonts, no necesitas escribir tu propio bloque @font-face. En su lugar, añade el parámetro display a la URL:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">

Google Fonts generará automáticamente las reglas @font-face con font-display: swap incluido.

❌ Incorrecto: `font-display` en un selector de clase

.heading {
  font-family: "Roboto", sans-serif;
  font-display: optional;
}

✅ Correcto: separa el descriptor de la regla de estilo

@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto.woff2") format("woff2");
  font-display: optional;
}

.heading {
  font-family: "Roboto", sans-serif;
}

El descriptor font-display: optional ahora vive correctamente en el bloque @font-face, donde le dice al navegador que use la fuente personalizada solo si ya está en caché — de lo contrario, que se quede con la fuente de respaldo. La regla .heading simplemente hace referencia a la familia de fuentes por nombre.