Texto visible durante la carga

Silktide comprueba si tu texto sigue siendo legible mientras se descargan las fuentes personalizadas. Algunas configuraciones de fuentes hacen que los navegadores oculten el texto por completo hasta que llega el archivo de la fuente, dejando a los visitantes ante una página sin palabras.

Por qué es importante

Los archivos de fuentes suelen ser grandes y, mientras se descarga uno, un navegador al que no se le haya indicado lo contrario puede renderizar el texto de esa fuente como invisible. En una conexión lenta, este "destello de texto invisible" puede durar segundos: la página parece cargada —imágenes y diseño en su sitio— pero no dice nada. Los visitantes no pueden leer y acciones basadas en texto como la navegación efectivamente desaparecen.

La parte frustrante es que el texto ya está ahí. Una línea de por fuente le indica al navegador que lo muestre en una fuente de reserva hasta que la fuente personalizada esté lista.

Cómo solucionarlo

Añade font-display: swap a cada regla @font-face, para que el texto se renderice de inmediato con una fuente del sistema y cambie cuando llegue la fuente personalizada:

@font-face {
  font-family: 'Pacifico';
  src: url('pacifico.woff2') format('woff2');
  font-display: swap; \/\* mostrar de inmediato el texto con la fuente de reserva *\/
}

Para las fuentes cargadas desde un servicio de alojamiento, utiliza la opción del servicio para esto —por ejemplo, un parámetro display=swap en la URL de la hoja de estilos— o el código de inserción actual, que por lo general ya lo incluye.
Elige una fuente de reserva con proporciones similares a tu fuente personalizada, de modo que el cambio provoque el menor movimiento posible —consulta Desplazamientos de diseño.

Cómo lo prueba Silktide

Cargar la página en un navegador real, usando el tipo de dispositivo, la velocidad de conexión y la ubicación de prueba configurados para tus pruebas de velocidad.
Examinar cada fuente personalizada que usa la página y comprobar si su regla @font-face mantiene el texto visible mientras la fuente se carga.
Informar de cada archivo de fuente que oculte el texto, con una estimación de cuánto tiempo permaneció invisible.
Calificar la página según el tiempo total que podría ahorrarse: alrededor de 100 milisegundos baja la nota y 200 milisegundos o más se califican como deficientes.

Solución de problemas

La fuente proviene de una hoja de estilos de terceros

No puedes editar una hoja de estilos alojada por otro servicio, pero la solución suele estar en cómo la solicitas: la mayoría de servicios de fuentes aceptan una opción de display en la URL u ofrecen un código de inserción actualizado. Si un proveedor no ofrece forma de configurar esto, plantéate alojar la fuente tú mismo para controlar la regla.

Nunca veo texto invisible

Con la fuente en caché, o en una conexión rápida, el intervalo es demasiado corto para notarlo; la comprobación importa para los visitantes nuevos en redes más lentas. También hay un compromiso a tener en cuenta: con swap, esos visitantes verán brevemente la fuente de reserva. Un cambio breve de fuente casi siempre es mejor que que falte texto.

Usamos una fuente de iconos

Intercambiar una fuente de iconos muestra caracteres de marcador de posición donde deberían estar los iconos, lo que puede parecer que está roto. En el caso de las fuentes de iconos, un breve periodo de bloqueo (font-display: block) o sustituir la fuente por iconos SVG suele ser la mejor elección.