¿Alguna vez has analizado tu web con PageSpeed Insights y has visto el mensaje “Asegúrate de que el texto permanece visible mientras se carga la fuente web”? Si es así, es probable que tengas un problema de font-display.

Este problema puede afectar al rendimiento de tu web, ya que puede provocar que el texto no se muestre correctamente hasta que la fuente se cargue por completo. Esto puede causar una mala experiencia de usuario y penalizar tu web en los resultados de búsqueda.

Qué es el Font-Display Swap

La propiedad font-display determina cómo se muestra una fuente basándose en cuándo está descargada y lista para usarse. Los valores posibles son:

• swap: Este es el valor predeterminado. Instruye al navegador a usar una fuente de reserva hasta que la fuente solicitada esté disponible.
• block: Instruye al navegador a mostrar un bloque vacío en el lugar del texto que utilice la fuente solicitada hasta que la fuente esté disponible.
• optional: Instruye al navegador a mostrar un texto alternativo en el lugar del texto que utilice la fuente solicitada hasta que la fuente esté disponible.
• fallback: Instruye al navegador a mostrar la fuente de reserva en el lugar del texto que utilice la fuente solicitada hasta que la fuente esté disponible.

El valor swap es el más utilizado, ya que permite mostrar el texto inmediatamente, incluso si la fuente solicitada no está disponible. El valor block es útil para evitar que el texto se muestre con una fuente de reserva de baja calidad. El valor optional es similar al valor fallback, pero permite al usuario seleccionar la fuente que desea utilizar.

Para usar la propiedad font-display, debes especificarla en la propiedad font-family. Por ejemplo:

font-family: sans-serif;  font-display: swap;  

Esto indicará al navegador que use una fuente sans-serif de reserva hasta que la fuente solicitada esté disponible.

También puedes usar la propiedad font-display para especificar el comportamiento de una fuente específica. Por ejemplo:

h1 {    font-family: "Roboto", sans-serif;    font-display: swap;  }  

Esto indicará al navegador que use una fuente sans-serif de reserva hasta que la fuente “Roboto” esté disponible.

La propiedad font-display es una característica relativamente nueva, por lo que es posible que no sea compatible con todos los navegadores. Sin embargo, la mayoría de los navegadores modernos la admiten.

Beneficios de utilizar Font-Display Swap

Cuando implementas font-display: swap; en CSS, estás aprovechando una propiedad que tiene varios beneficios clave para mejorar la velocidad de carga y el rendimiento de tu sitio web:

1. Mejora la percepción de velocidad:

   • Font-Display Swap permite que el navegador muestre un texto con una fuente de respaldo de inmediato, incluso antes de que la fuente principal se haya descargado por completo.
   • Los usuarios experimentan una carga más rápida de contenido textual, lo que contribuye a una sensación general de rapidez en la interacción con el sitio.

2. Evita el bloqueo del contenido:

   • En ausencia de Font-Display Swap, los navegadores suelen bloquear el contenido hasta que se haya descargado la fuente principal. Esto puede resultar en una experiencia de usuario menos fluida.
   • Con Font-Display Swap, el navegador puede mostrar el contenido con una fuente de respaldo inmediatamente, evitando así la espera del usuario.

3. Optimización para conexiones lentas:

   • En situaciones donde la conexión a internet es más lenta, la implementación de Font-Display Swap es especialmente beneficiosa. Permite que el contenido textual se cargue rápidamente, mejorando la accesibilidad para usuarios con conexiones más lentas.

4. Mejora la retención de usuarios:

   • Los tiempos de carga más rápidos contribuyen a una mejor retención de usuarios. Los visitantes son más propensos a permanecer en un sitio web si la experiencia de carga es eficiente y rápida.
   • Font-Display Swap contribuye a una experiencia de usuario más positiva, lo que puede traducirse en una retención y conversión mejoradas.

5. SEO y clasificación en buscadores:

   • Google y otros motores de búsqueda consideran la velocidad de carga como un factor importante en la clasificación de sitios web.
   • La implementación de Font-Display Swap puede mejorar la puntuación de velocidad de tu sitio, lo que, a su vez, puede tener un impacto positivo en el rendimiento de SEO y la visibilidad en los resultados de búsqueda.

6. Experiencia consistente en todas las plataformas:

   • Font-Display Swap ayuda a garantizar una experiencia de usuario más consistente, independientemente del dispositivo o navegador que esté utilizando el visitante.
   • Al mostrar el contenido con una fuente de respaldo de inmediato, se minimizan las posibles variaciones en la apariencia del texto durante el proceso de carga de la fuente principal.

Cómo solucionar el problema de font-display en CSS

¿Has recibido alguna vez una sugerencia de mejora en PageSpeed Insights que te indica que debes solucionar el problema de font-display? Si es así, no te preocupes, es un problema bastante común que se puede solucionar fácilmente.

En este post, te explicaremos qué es el font-display, por qué es importante solucionar este problema y cómo hacerlo de diferentes maneras.

¿Por qué es importante solucionar el problema de font-display?

Los archivos de fuentes tipográficas pueden tardar bastante en cargarse, lo que puede suponer un problema para el rendimiento web del site. Si el texto no se muestra correctamente mientras la fuente se está cargando, la experiencia del usuario se verá afectada.

Además, los navegadores pueden penalizar a las webs que tienen problemas de font-display en los resultados de búsqueda.

Cómo solucionar el problema de font-display

Para solucionar el problema de font-display, podemos hacerlo de diferentes maneras. La mejor manera dependerá de cómo se estén realizando las llamadas a las fuentes tipográficas en nuestra web.

Desde un archivo CSS que llama a la fuente

Si las fuentes son llamadas desde un archivo CSS con el atributo @font-face, podemos utilizar la función swap para la propiedad font-display.

@font-face {    font-family: "Roboto";    font-display: swap;  }  

Cargando la fuente con preload

Otra manera sencilla de solucionar el problema es hacer uso de la carga de la fuente con el atributo rel=”preload”. Para ello, solo necesitamos indicar en la ruta del archivo enlazado desde el HTML de la web este atributo:

<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>  

Añadir parámetro a Google Fonts

Como última opción, también podemos añadir el parámetro &display=swap dentro del enlace en HTML de la fuente en cuestión.

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">  

¿Es necesario utilizar las 3 tipologías?

Con utilizar una de las opciones que recomienda Google debe ser más que suficiente para solucionar el problema.

¿Funciona con rutas fonts.gstatic.com o solo sirve para fonts.googleapis.com?

Bajo nuestra experiencia, normalmente las hemos tenido que implementar bajo rutas de fonts.googleapis.com, pero como muestran desde Page Speed, debe valer también para rutas fonts.gstatic.com.

¿Hay algún plugin para font-display en WordPress?

Sí, puedes instalar el plugin de Swap Google Fonts Display que podrás encontrar en los resultados de búsqueda de WordPress.

Font-Display Swap Compatibilidad del Navegador:

Información sobre qué navegadores admiten la propiedad Font-Display Swap:

Hasta mi última actualización en enero de 2022, la propiedad font-display es compatible con la mayoría de los navegadores modernos. Los principales navegadores que admiten esta propiedad son:

• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge
• Opera

Es importante verificar las últimas actualizaciones y la documentación oficial de cada navegador para confirmar la compatibilidad, ya que las características pueden cambiar con el tiempo.

Estrategias de mitigación para navegadores que no la admiten:

Si te encuentras con navegadores que no admiten la propiedad font-display, es posible implementar estrategias de mitigación para garantizar una experiencia de usuario consistente:

• Utilizar Fuentes Seguras por Defecto:
  • Configura una fuente genérica que sea segura y común en todos los navegadores como fallback mientras se carga la fuente principal.
• JavaScript como Solución Alternativa:
  • Puedes utilizar JavaScript para detectar la compatibilidad de font-display y, en su ausencia, aplicar dinámicamente estilos o cargar fuentes de manera diferente.
• Gracia Elegante (Graceful Degradation):
  • Diseña tu sitio de manera que sea completamente funcional incluso si la propiedad font-display no está disponible. Asegúrate de que el contenido sea accesible y legible sin depender completamente de la carga de fuentes específicas.

Mejores Prácticas y Consejos al usar Font-Display Swap.

Recomendaciones para optimizar aún más el rendimiento de las fuentes web:

• Minimizar el Número de Fuentes:
  • Limita la cantidad de fuentes utilizadas en tu sitio para reducir el tiempo de carga.
• Optimización de Formatos de Fuente:
  • Utiliza formatos de fuente comprimidos y eficientes, como WOFF2, para minimizar el tamaño de descarga.
• Utilizar Fuentes Sistémicas o Genéricas:
  • Donde sea posible, aprovecha las fuentes del sistema o fuentes genéricas para mejorar la velocidad de carga.
• Carga Asíncrona:
  • Considera cargar fuentes de manera asincrónica para que no bloqueen la renderización de la página.

Consejos para Elegir y Cargar Fuentes de Manera Eficiente:

• Priorizar el Contenido Crítico:
  • Carga primero las fuentes necesarias para el contenido visible inicial, posponiendo la carga de fuentes menos críticas.
• Uso de Font-Display Swap Selectivamente:
  • Aplica font-display: swap; solo a fuentes que realmente necesitas intercambiar. Puedes optar por otras estrategias para fuentes menos críticas.
• Considerar el Peso de la Fuente:
  • Evalúa el peso de las fuentes en términos de rendimiento. Fuentes más ligeras pueden cargar más rápido.

Ejemplos de Casos de Uso de Font-Display Swap.:

Situaciones en las que Font-Display Swap es Especialmente Útil:

• Contenido Dinámico:
  • Sitios con contenido dinámico que se carga después de la carga inicial pueden beneficiarse al mostrar texto de inmediato con una fuente de respaldo mientras se carga la fuente principal.
• Webs con Contenido Extenso:
  • Sitios con mucho contenido textual pueden mejorar la velocidad percibida al implementar Font-Display Swap, asegurando que el texto sea legible antes de que se cargue completamente la fuente principal.

Casos Reales de Implementación con Resultados Positivos de Font-Display Swap:

• Sitios de Noticias:
  • Sitios de noticias que tienen una gran cantidad de texto y actualizaciones frecuentes pueden utilizar Font-Display Swap para mejorar la experiencia de carga y retener a los usuarios.
• Plataformas de Blogs:
  • Plataformas de blogs que dependen en gran medida del contenido textual pueden implementar Font-Display Swap para garantizar una carga rápida y una lectura ininterrumpida.
• Portafolios en Línea:
  • En portafolios en línea, donde la tipografía es esencial para la presentación visual, Font-Display Swap puede mejorar la apariencia del contenido y la impresión general del sitio.