¿Por qué debería importarte?
Las fuentes suelen ser archivos grandes que tardan un poco en cargarse. Para solucionarlo, algunos navegadores ocultan el texto hasta que se carga la fuente (el "flash de texto invisible").
El Procesamiento de imagen con contenido más grande (LCP) puede retrasarse a la espera de que se renderice el texto. Si deseas optimizar el rendimiento, te recomendamos evitar el "destellos de texto invisible" (FOIT) y mostrar el contenido a los usuarios de inmediato mediante una fuente del sistema, lo que crea un "destello de texto sin estilo" (FOUT).
Valores predeterminados del navegador para mostrar fuentes
Estos son los comportamientos predeterminados de carga de fuentes para navegadores comunes:
| Navegador | Comportamiento predeterminado si la fuente no está lista... |
|---|---|
| Chrome y Edge | Se ocultará el texto durante un máximo de 3 segundos. Si el texto aún no está listo, usa una fuente del sistema hasta que la fuente esté lista y, luego, intercambia la fuente. |
| Firefox | Se ocultará el texto durante un máximo de 3 segundos. Si el texto aún no está listo, usa una fuente del sistema hasta que la fuente esté lista y, luego, intercambia la fuente. |
| Safari | Oculta el texto hasta que la fuente esté lista. |
Cómo mostrar el texto de inmediato
En esta guía, se describen dos maneras de mostrar el texto lo antes posible: el primer enfoque es simple y ofrece una buena compatibilidad con navegadores. El segundo enfoque es exhaustivo, pero puede brindarte 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 le indica al navegador que el texto que use esta fuente se debe mostrar inmediatamente usando una fuente del 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, este continúa siguiendo su comportamiento predeterminado para cargar fuentes.
Opción 2: Espera a usar las 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. Para ello, refactorizas tu CSS para que no use fuentes personalizadas inicialmente. Esto garantiza que el navegador muestre texto de inmediato usando una fuente del sistema.
- Detecta cuándo se carga tu fuente personalizada con la API de CSS Font Loading.
- Se actualizó 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 cuando se cargan las fuentes. Por ejemplo, todas las fuentes se pueden cargar a la vez y se evitan varios diseños a medida que se carga cada una. O bien, los sitios pueden optar por no cargar las fuentes para los usuarios con conexiones más lentas o los 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 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 Generar informe.
Confirma que se apruebe la auditoría Asegúrate de que el texto permanezca visible durante la carga de la fuente web.