Evite el texto invisible durante la carga de fuentes

Katie Hempenius
Katie Hempenius
X

¿Por qué debería preocuparte?

Las fuentes suelen ser archivos de gran tamaño que tardan un poco en cargarse. Para hacer frente a esto, algunos navegadores ocultan el texto hasta que se carga la fuente (el "destello de texto invisible"). Si está optimizando el rendimiento, querrá evitar el "destello de texto invisible" y mostrar el contenido a los usuarios inmediatamente usando una fuente del sistema (el "destello de texto sin estilo").

Mostrar el texto inmediatamente

Esta guía describe dos formas de conseguir esto: el primer enfoque es muy simple pero no tiene support (soporte) universal de navegadores; el segundo enfoque es más trabajoso, pero tiene compatibilidad total con los navegadores. La mejor opción para usted es la que realmente implementará y mantendrá.

Opción n. 1: Usar font-display

Antes Después
@font-face { font-family: Helvetica; } @font-face { font-family: Helvetica; <strong>font-display: swap;</strong> }

font-display es una API para especificar la estrategia de visualización de fuentes. swap le dice al navegador que el texto que usa esta fuente debe mostrarse inmediatamente usando una fuente del sistema. Una vez que la fuente personalizada está lista, la fuente del sistema se cambia.

Si un navegador no admite font-display, el navegador continúa con su comportamiento predeterminado para cargar fuentes. Compruebe qué navegadores admiten font-display aquí.

Estos son los comportamientos predeterminados de carga de fuentes para navegadores comunes:

Navegador Comportamiento predeterminado si la fuente no está lista...
Edge Utiliza una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.
Chrome Oculta el texto hasta por 3 segundos. Si el texto aún no está listo, use una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.
Firefox Oculta el texto hasta por 3 segundos. Si el texto aún no está listo, use una fuente del sistema hasta que la fuente esté lista. Cambia la fuente.
Safari Oculta el texto hasta que la fuente esté lista.

Opción n. 2: Espere para usar fuentes personalizadas hasta que se carguen

Con un poco más de trabajo, se puede implementar el mismo comportamiento para que funcione en todos los navegadores.

Este enfoque consta de tres partes:

  • No utilice una fuente personalizada en la carga de la página inicial. Esto asegura que el navegador muestre el texto inmediatamente usando una fuente del sistema.
  • Detecta cuando se carga su fuente personalizada. Esto se puede lograr con un par de líneas de código JavaScript, gracias a la biblioteca FontFaceObserver.
  • Actualice el estilo de la página para usar la fuente personalizada.

Estos son los cambios que puede esperar realizar para implementar esto:

  • Refactorice su CSS para no usar una fuente personalizada durante la carga inicial de la página.
  • Agrega una secuencia de comandos a tu página. Este script detecta cuándo se carga la fuente personalizada y luego actualizará el estilo de la página.

Verificar

Ejecute Lighthouse para verificar que el sitio esté usando font-display: swap para mostrar texto:

  1. Press `Control+Shift+J` (or `Command+Option+J` on Mac) to open DevTools.
  2. Click the Lighthouse tab.
  3. Make sure the Performance checkbox is selected in the Categories list.
  4. Click the Generate report button.

Confirme que la auditoría Ensure text remains visible during webfont load (Asegúrate de que el texto permanece visible mientras se carga la fuente web) está pasando.