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:
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
- Código fuente de la auditoría Asegurar que el texto permanezca visible durante la carga de la fuente web
- Evita el texto invisible durante la carga
- Cómo controlar el rendimiento de la fuente con pantallas de fuentes
- Precarga fuentes web para mejorar la velocidad de carga (codelab)
- Precarga fuentes opcionales para evitar el cambio de diseño y los destellos de texto invisible (FOIT)