¿Por qué debería interesarte?
Las fuentes suelen ser archivos grandes que tardan un poco en cargarse. Para lidiar con esto, algunos navegadores ocultan el texto hasta que se carga la fuente (el "destello de texto invisible").
El procesamiento de imagen con contenido más grande (LCP) puede retrasarse hasta que se procese el texto. Si deseas optimizar el rendimiento, te recomendamos evitar el "destello de texto invisible" (FOIT) y mostrar el contenido a los usuarios inmediatamente utilizando una fuente de sistema, que crea un "destello de texto sin estilo" (FOUT).
Valores predeterminados del navegador para mostrar las fuentes
Estos son los comportamientos de carga de fuentes predeterminados para los navegadores comunes:
| Navegador | Comportamiento predeterminado si la fuente no está lista... |
|---|---|
| Chrome y Edge | Ocultará el texto durante un máximo de 3 segundos. Si el texto aún no está listo, utiliza una fuente de sistema hasta que la fuente esté lista y, luego, la intercambia. |
| Firefox | Ocultará el texto durante un máximo de 3 segundos. Si el texto aún no está listo, utiliza una fuente de sistema hasta que la fuente esté lista y, luego, la intercambia. |
| Safari | Oculta el texto hasta que la fuente esté lista. |
Mostrar texto de inmediato
En esta guía, se describen dos formas de mostrar texto lo antes posible: el primer enfoque es simple y ofrece una buena compatibilidad con navegadores. El segundo enfoque es más detallado, pero puede ofrecerte más opciones. La mejor opción para tu sitio web depende de tus requisitos.
Opción 1: Usa font-display
font-display es una API para especificar la estrategia de visualización de fuentes. swap indica al navegador que el texto que usa esta fuente debe mostrarse inmediatamente con una fuente de sistema. Una vez que la fuente personalizada está lista, se intercambia la fuente del sistema.
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
Si un navegador no admite font-display, aunque todos los navegadores modernos sí lo hacen, el navegador continúa siguiendo su comportamiento predeterminado para cargar fuentes.
Opción 2: Espera para usar fuentes personalizadas hasta que se carguen
Con un poco más de trabajo, se puede considerar un enfoque más personalizado.
Este enfoque tiene tres partes:
- No uses una fuente personalizada en la carga inicial de la página mediante la refactorización de tu CSS para no usar fuentes personalizadas inicialmente. Esto garantiza que el navegador muestre texto de inmediato utilizando una fuente de sistema.
- Detecta cuándo se carga tu fuente personalizada con la API de carga de fuentes de CSS
- Actualiza el estilo de la página para usar la fuente personalizada.
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});
Esto también se puede lograr con la biblioteca FontFaceObserver, que para algunas personas es más fácil de usar.
Esto permite una serie de consideraciones adicionales al cargar las fuentes. Por ejemplo, todas las fuentes se pueden cargar a la vez, lo que evita tener varios diseños a medida que se carga cada fuente. O bien, los sitios podrían optar por no cargar fuentes para los usuarios con conexiones más lentas o para aquellos que usan la opción Guardar datos.
Verificar
Ejecuta Lighthouse para verificar que el sitio use font-display: swap para mostrar texto:
- Presiona Control + Mayúsculas + J (o Comando + Opción + J en Mac) para abrir las Herramientas para desarrolladores.
- Haz clic en la pestaña Lighthouse.
- Asegúrate de que la casilla de verificación Rendimiento esté seleccionada en la lista Categorías.
- Haz clic en el botón Generate report.
Confirma que se apruebe la auditoría Asegúrate de que el texto permanezca visible durante la carga de la fuente web.