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 provoca un destellos de texto invisible (FOIT).

Cómo falla la auditoría de font-display de Lighthouse

Lighthouse marca las URLs de las fuentes que podrían parpadear texto invisible:

Captura de pantalla de Lighthouse para asegurar que el texto permanezca visible durante la auditoría de cargas de fuentes 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 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 tu URL de Google Fonts:

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

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

Si se muestra temporalmente una fuente del sistema, se reemplazará un FOIT por un destello de texto sin estilo (FOUT). Esto mejora FCP&LCP mediante la renderización de contenido más rápido. Sin embargo, FOIT y FOUT tendrán el mismo impacto en CLS cuando la fuente personalizada reemplace la fuente temporal del sistema.

El impacto de CLS de la carga de fuentes se puede mitigar mediante las precargas junto con font-display: optional. Sin embargo, el uso excesivo de precargas puede afectar negativamente las métricas de carga. Te recomendamos que realices pruebas A/B para asegurarte de que la precarga de fuentes no ocasione regresiones de rendimiento.

Orientación específica de pila

Drupal

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

Magento

Especifica @font-display cuando definas fuentes personalizadas.

Recursos