Estás cargando fuentes de forma incorrecta (y eso está perjudicando el rendimiento)

• Las webfonts son un elemento visual del sitio web que da forma a la marca y a la experiencia de usuario, y afectan directamente el rendimiento y la accesibilidad
• Una forma incorrecta de cargar fuentes provoca problemas de FOUT (parpadeo de texto sin estilo) o FOIT (parpadeo de texto invisible), lo que impacta negativamente en las Core Web Vitals
• El formato WOFF2 es un formato de fuente moderno y eficiente, compatible con la mayoría de los navegadores actuales, y mejora el rendimiento al eliminar formatos legacy innecesarios
• El subsetting de fuentes y la estrategia de preload son esenciales para reducir transferencias de datos innecesarias y acelerar la carga de la página
• Aprovechar la pila de fuentes del sistema y los descriptores CSS ayuda a minimizar los cambios de diseño (CLS) durante la carga de fuentes y ofrece una experiencia de usuario más estable

---

Breve historia de las webfonts

Las webfonts son un elemento clave del diseño web y de la experiencia de usuario, pero aun así mucha gente las sigue usando de forma incorrecta. A continuación se resume su evolución.

• La era de las "web safe"

  • En la web temprana solo se podían usar web safe fonts como Arial y Times New Roman, y las fuentes personalizadas se reemplazaban con imágenes
  • Como el renderizado tipográfico variaba entre navegadores, era difícil mantener un diseño consistente

• Hacks anteriores a @font-face: sIFR y Cufón

  • sIFR: renderizaba texto dinámicamente usando Flash, pero era pesado y tenía mala accesibilidad
  • Cufón: convertía fuentes a gráficos vectoriales mediante JavaScript para incrustarlas, pero era lento y mantenía los problemas de accesibilidad

• La llegada de @font-face

  • @font-face permitió incrustar fuentes personalizadas con CSS, pero era complejo porque cada navegador pedía formatos distintos (EOT, fuentes SVG, TTF/OTF)
  • Los problemas de licencias de fuentes y la piratería estaban muy extendidos

• Servicios comerciales: Typekit y compañía

  • Typekit (hoy Adobe Fonts) fue un servicio por suscripción que resolvía problemas de licencias y compatibilidad, ofreciendo fuentes mediante un snippet de JavaScript
  • El patrón de depender de scripts de terceros continúa hasta hoy

• Hacks de compatibilidad y soluciones alternativas

  • Era necesario alojar varios formatos o aplicar correcciones con JavaScript para resolver FOUT y FOIT
  • También hubo intentos de resolver la falta de glifos usando fuentes de íconos

• Google Fonts y el boom de las "fuentes gratis"

  • Google Fonts facilitó la carga de fuentes mediante tipografías con licencias abiertas y gratuitas, pero también generó nuevos problemas, como posibles incumplimientos del GDPR y velocidades de carga lentas
  • A diferencia de muchas fuentes comerciales, difíciles de optimizar por sus restricciones de licencia, Google Fonts permitía un uso más libre

Cómo funcionan las fuentes (lo básico)

Las fuentes no son una simple configuración de CSS, sino un componente complejo profundamente involucrado en el pipeline de renderizado del navegador.

• Formatos: de TTF a WOFF2

  • TTF/OTF: formatos pesados, orientados al escritorio
  • WOFF2: formato moderno y eficiente para webfonts que usa compresión Brotli, adecuado para la mayoría de los proyectos

• Pipeline de renderizado

  • La carga de fuentes pasa por las etapas de registro, resolución de estilos, font matching, cobertura de glifos, solicitud, fase de visualización y decodificación y shaping
  • La configuración de font-display (swap, block, fallback, optional) determina cómo se muestra el texto

• Métricas

  • Métricas como ascent, descent y line gap definen la altura y el espaciado de una fuente
  • Al reemplazar una fuente, una diferencia de métricas puede provocar layout shift (CLS)

• Estilos sintéticos

  • Si el navegador no encuentra el font weight o estilo solicitado, genera negritas o cursivas falsas, lo que reduce la calidad
  • Se puede evitar con font-synthesis: none;

• Cobertura de glifos

  • Una fuente no incluye todos los caracteres; los glifos faltantes se renderizan con una fuente de respaldo, causando problemas de consistencia
  • Usa unicode-range para cargar solo los glifos necesarios

Fundamentos de rendimiento y estrategia

Las fuentes afectan la critical rendering path, y una mala gestión puede degradar el rendimiento.

• Tamaño de archivo

  • Una sola familia tipográfica puede llegar a 800KB, y si incluye glifos innecesarios desperdicia datos
  • El subsetting de fuentes optimiza el tamaño al enviar solo los glifos necesarios

• Layout shift

  • Las diferencias de métricas entre la fuente de respaldo y la personalizada pueden generar CLS
  • Descriptores CSS como size-adjust y ascent-override ayudan a estabilizar el diseño

• Descriptores CSS modernos

  • font-display: swap; muestra de inmediato una fuente de respaldo para ofrecer un renderizado estable
  • unicode-range permite cargar solo los glifos necesarios para un script específico

Fuentes variables: promesa vs. realidad

Las fuentes variables pueden mejorar la eficiencia al admitir múltiples estilos y pesos en un solo archivo.

• La promesa

  • Integrar varios archivos estáticos en uno solo
  • Tipografía responsive que puede ajustarse dinámicamente según el tamaño del viewport

• La realidad

  • Si se necesitan pocos pesos, una fuente variable puede terminar siendo más pesada
  • El soporte de navegadores es limitado en algunos ejes, y también pueden surgir problemas de licencia

• Estrategia de rendimiento

  • Seleccionar solo los ejes necesarios y optimizar el tamaño del archivo con subsetting por script
  • Verificar si realmente ofrece ventajas frente a fuentes estáticas

• Ejemplo de uso de ejes de fuente variable en CSS

  @font-face {  
    font-family: "Acme Variable";  
    src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
    font-weight: 100 900;  
    font-display: swap;  
  }  
  h1 {  
    font-family: "Acme Variable", system-ui, sans-serif;  
    font-weight: 700;  
  }  
  

Pila del sistema y CDN

Usar una pila de fuentes del sistema sin fuentes personalizadas ofrece carga inmediata y una experiencia familiar.

• Pila de fuentes del sistema

  • Una pila compuesta por fuentes como -apple-system y Segoe UI mantiene consistencia en todas las plataformas
  • En el renderizado de emoji, las fuentes del sistema suelen ofrecer mejor rendimiento

• CDN y hosting de terceros

  • Google Fonts puede implicar incumplimientos del GDPR por filtración de datos
  • El self-hosting reduce la latencia de búsquedas DNS y permite controlar mejor la caché

Fuentes de respaldo y matching

Las fuentes de respaldo determinan la experiencia de usuario antes de que cargue la fuente personalizada, por lo que requieren un diseño estable.

• Diseño de la fuente de respaldo

  • Configurar la x-height y el ancho de caracteres para que se parezcan a la fuente personalizada minimiza el CLS
  • font-size-adjust permite ajustar el tamaño de la fuente de respaldo

• Matching entre fuentes personalizadas y de respaldo

  • Elegir fuentes con proporciones similares y ajustar métricas ayuda a mantener la estabilidad del layout
  • Considerar diferencias de renderizado entre plataformas y priorizar estabilidad y legibilidad

Preloading y estrategia de carga

La estrategia de entrega de fuentes tiene un gran impacto en la experiencia de usuario.

• Resultados de carga

  • FOIT provoca texto invisible en redes lentas
  • font-display: swap; es un valor predeterminado seguro que muestra de inmediato una fuente de respaldo

• Preloading

  • Usa <link rel="preload" as="font"> para iniciar de inmediato la carga de fuentes
  • Los encabezados CORS y la coincidencia exacta de la URL son imprescindibles

• Early Hints (HTTP 103)

  • Permiten que el servidor indique la carga de fuentes antes de responder con el HTML, reduciendo el tiempo de carga
  • Solo las fuentes críticas deben marcarse como hint para evitar desperdiciar ancho de banda

• API de carga de fuentes

  • La Font Loading API permite un control fino de la carga de fuentes en sitios dinámicos

Formatos de archivo: WOFF2, WOFF, TTF y la carga legacy

WOFF2 es el formato más eficiente para la web moderna, y en la mayoría de los casos basta con un solo formato.

• Usar solo WOFF2 para eliminar formatos innecesarios
• Hay que evitar el embedding en base64 porque perjudica la caché

Fuentes de íconos: Font Awesome y un gran error

Las fuentes de íconos no son adecuadas para la web moderna por sus problemas de accesibilidad y rendimiento.

• Los íconos SVG son semánticos, flexibles y se pueden estilizar con CSS
• Si ya usas fuentes de íconos, necesitas un plan de subsetting y migración a SVG

Más allá del latín: scripts no latinos, idiomas RTL y emoji

Los scripts no latinos y los idiomas RTL requieren shaping y métricas más complejos.

• Al hacer subsetting, hay que considerar las características de cada script para evitar errores de renderizado
• Para emoji, conviene usar fuentes del sistema para mejorar consistencia y rendimiento

El futuro de las webfonts: estándares en evolución y riesgos modernos

Nuevas propiedades CSS, fuentes variables y fuentes de color siguen impulsando la tipografía web.

• La Font Loading API y Early Hints ayudan a resolver problemas de latencia en SPA
• Hay que tratar las fuentes como infraestructura y priorizar el rendimiento y la accesibilidad

Herramientas y auditoría

El rendimiento de fuentes puede medirse con herramientas como DevTools, Lighthouse y Glyphhanger.

• Las herramientas de subsetting de fuentes eliminan glifos innecesarios
• Font Style Matcher ayuda a ajustar las métricas de las fuentes de respaldo

Declaración para tratar las fuentes correctamente

Las fuentes no son un simple adorno, sino un elemento central de la experiencia de usuario y del rendimiento.

• Primero el sistema: empezar con una pila sólida de fuentes del sistema
• Subsetting inteligente: enviar solo los glifos necesarios
• Solo WOFF2: eliminar formatos legacy
• Respeto por los scripts globales: compatibilidad con múltiples idiomas y emoji
• Importancia de las pruebas: probar en distintas redes y dispositivos

Hay que tratar las fuentes como contenido y también como marca, aplicando una gestión rigurosa del rendimiento y la accesibilidad

[nemorize]

Vaya, de verdad hace muchísimo que no escuchaba ese nombre, Cufón jaja