Las fuentes web siguen siendo la mejora de rendimiento más fácil en la mayoría de los sitios

El patrón que sigue apareciendo

Si hoy auditas diez sitios web de producción al azar, encontrarás más o menos la misma situación de fuentes en la mayoría de ellos:

• Se cargan entre seis y diez archivos de fuente en la página de inicio
• Todos están en WOFF2 (bien), pero sin estrategia de font-display (mal)
• Hay varios pesos y estilos que no se usan en ninguna parte de la página
• Toda la pila se sirve desde un dominio de terceros (Google Fonts, normalmente), con todo el coste de DNS, TLS y privacidad que eso implica
• No hay subconjuntos con unicode-range, así que cada visitante descarga los glifos cirílicos y griegos aunque la página esté en inglés

Este no es un problema exclusivo de los sitios pequeños. Muchas páginas de marketing bien financiadas siguen cargando 600 KB de fuentes antes de que el primer párrafo pueda pintarse. Una vez que empiezas a notar el patrón, no puedes dejar de verlo.

La solución no es exótica. Es un puñado de técnicas bien conocidas que llevan años en los navegadores.

Usa una fuente variable en lugar de seis estáticas

Si estás cargando Inter Regular, Inter Medium, Inter SemiBold, Inter Bold y sus cursivas, estás descargando aproximadamente seis veces más bytes de los que necesitas. Una sola fuente variable de Inter cubre todo el eje de peso (y la inclinación, en algunas compilaciones) en un archivo que apenas es más grande que dos pesos estáticos.

La historia de compatibilidad en navegadores está resuelta desde hace años: las fuentes variables funcionan en todos los lugares importantes. La resistencia que queda es, sobre todo, memoria muscular heredada de la era de las fuentes estáticas.

Una regla práctica: un archivo de fuente variable por script, por familia. Latín en un archivo, cirílico en otro, griego en un tercero, cargados condicionalmente con unicode-range. Eso es todo.

Define un font-display sensato

El comportamiento predeterminado cuando una fuente personalizada aún se está cargando es no mostrar nada —texto invisible— durante hasta tres segundos. Es el peor valor predeterminado posible. Los usuarios ven una página en blanco y asumen que algo está roto.

Añade esto a cada regla @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap muestra la fuente de fallback de inmediato y cambia a la fuente personalizada cuando se carga. El usuario puede leer la página desde el milisegundo cero. La contrapartida es un breve desplazamiento de diseño cuando ocurre el cambio, que se mitiga con la siguiente técnica.

Ajusta las métricas del fallback

Un destello de texto sin estilo solo resulta molesto cuando la fuente de fallback y la personalizada tienen métricas muy distintas. El CSS moderno soluciona esto con size-adjust, ascent-override y similares:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Con las métricas del fallback ajustadas, el cambio es apenas perceptible: las palabras ocupan el mismo espacio horizontal antes y después de que llegue la fuente personalizada.

El trabajo de Google en --allow-fallback-font-metrics ya forma parte del soporte base de los navegadores, y existe una canalización de herramientas (la biblioteca fontaine y similares) que calcula los valores correctos por ti en segundos.

Haz self-hosting

Google Fonts es cómodo, gratuito, y trae dos costes reales:

1. Un segundo handshake TLS. Incluso con HTTP/3 y coalescencia de conexiones, un origen adicional rara vez es gratis.
2. Una cuestión de privacidad y cumplimiento. Varios tribunales europeos han dictaminado que cargar Google Fonts desde fonts.gstatic.com constituye una transmisión de datos personales (la dirección IP) a un tercero. El self-hosting elimina la cuestión por completo.

La canalización para descargar y alojar es:

1. Obtén el archivo WOFF2 (compilación variable si existe)
2. Redúcelo a los scripts que tu audiencia usa realmente
3. Sírvelo desde el mismo origen que el resto de tu sitio, con un Cache-Control: max-age=31536000, immutable largo
4. Precarga el peso más crítico: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Esa es toda la canalización. Lleva una tarde en un sitio existente, y casi nunca vuelves atrás.

Cuándo prescindir por completo de las fuentes personalizadas

Vale la pena decirlo claramente: no todos los sitios necesitan una fuente personalizada. La pila de fuentes del sistema ya es realmente bonita en todos los sistemas operativos:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

El peso es correcto, las métricas son correctas, el renderizado está optimizado para el dispositivo y el coste en bytes transferidos es exactamente cero. Para un sitio de herramientas, una app interna, un portafolio que prioriza el contenido o cualquier cosa dirigida a usuarios en redes lentas, la pila del sistema es la respuesta correcta.

<!-- tool-cta:start -->

💡 Prueba esto: Convierte tus archivos TTF u OTF a WOFF2 moderno con CSS listo para usar mediante Webfont Generator, que es el cambio de formato que recomienda la publicación.

<!-- tool-cta:end -->

El resumen honesto

Para un sitio pequeño típico, cuatro pasos cubren toda la historia de rendimiento de las fuentes web:

1. Una fuente variable por familia y por script
2. font-display: swap con métricas de fallback ajustadas
3. Self-hosting con cabeceras de caché largas y un preload para el peso crítico
4. O prescinde de las fuentes por completo y usa la pila del sistema

Haz esto una vez y recuperarás varios cientos de kilobytes en la página de inicio, ganarás unos cientos de milisegundos de rendimiento percibido y eliminarás una dependencia de terceros de paso. Pocos cambios tienen una mejor relación entre esfuerzo y beneficio.