Asegúrate de que el texto permanezca visible mientras se carga la fuente para sitios web

Las fuentes suelen ser archivos grandes con tiempos de carga lentos. Algunos navegadores ocultan el texto hasta que se carga la fuente, lo que genera un destello de texto invisible (FOIT).

Cómo falla la auditoría de la pantalla de fuentes de Lighthouse

Lighthouse marca todas las URLs de fuentes que puedan mostrar texto invisible de forma intermitente:

Una captura de pantalla de la auditoría de Lighthouse Asegúrate de que el texto permanezca visible mientras se carga la fuente para sitios web

Cómo evitar mostrar texto invisible

La API de font-display indica cómo se muestra una fuente cuando se usa dentro de un estilo font-face. Los siguientes valores de font-display le indicarán al navegador que use una fuente del sistema si la fuente personalizada no está lista:

  • swap
  • optional
  • fallback

Ejemplo de CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Ejemplo de Google Fonts

Agrega el parámetro &display=swap/&display=optional/&display=fallback al final de la URL de Google Fonts:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Cómo evitar los cambios de diseño causados por fuentes diferidas

Si se muestra temporalmente una fuente del sistema, se reemplazará una FOIT por un destello de texto sin diseño (FOUT). Esto mejora el FCP&LCP, ya que renderiza el contenido más rápido pero FOIT y FOUT tendrán el mismo impacto en CLS cuando la fuente personalizada reemplace a la fuente temporal del sistema.

El impacto de la CLS del cargamento de fuentes se puede mitigar con cargas previas junto con font-display: optional. Sin embargo, el uso excesivo de las cargas previas puede afectar de forma negativa las métricas de carga. Te recomendamos que realices pruebas A/B para asegurarte de que la carga previa de fuentes no genere ninguna regresión de rendimiento.

Orientación específica de la pila

Drupal

Especifica @font-display cuando definas fuentes personalizadas en tu tema.

Magento

Especifica @font-display cuando definas fuentes personalizadas.

Recursos