Formatos de fuente web

Los archivos de fuente existen en varios formatos. Para la web, elegir el correcto impacta directamente en el peso del archivo y en el soporte del navegador.

Formato	Extensión	Estado	Notas
WOFF2	.woff2	VIGENTE — recomendado	Compresión Brotli; ~30% más eficiente que WOFF. Soporte universal en todos los navegadores modernos.
WOFF	.woff	VIGENTE (fallback legacy)	Buena compresión. Era el estándar antes de WOFF2. Hoy solo útil como fallback para IE11, que nadie debería necesitar.
TTF	.ttf	LEGACY para web — evitar	Sin compresión web. Archivo grande. Era necesario hace años para soportar Safari antiguo. Innecesario hoy.
OTF	.otf	LEGACY para web — evitar	Sin compresión web. Mismo caso que TTF. Se distribuye como archivo de diseño, no para la web.
EOT	.eot	LEGACY — no usar	Solo Internet Explorer antiguo. Completamente obsoleto.
SVG fonts	.svg	LEGACY — no usar	Solo Safari antiguo. Obsoleto. Sin soporte moderno.

Regla práctica para 2026: woff2 solo es suficiente para cualquier sitio nuevo.

@font-face {
  font-family: "MiFuente";
  src: url("mifuente.woff2") format("woff2");
  /* No es necesario listar WOFF o TTF como fallback */
}

El patrón legacy (para reconocerlo, no para usarlo)

Si ves código de 2015–2020, es probable que encuentres esto:

@font-face {
  font-family: "MiFuente";
  src: url("mifuente.woff2") format("woff2"),
       url("mifuente.woff")  format("woff"),
       url("mifuente.ttf")   format("truetype");
}

Era necesario para soportar navegadores muy viejos. Hoy es código innecesario — el navegador usa el primer formato que soporta (woff2), e IE no es un objetivo válido.

---

Rendimiento: las fuentes bloquean el render

Las web fonts son recursos que el navegador tiene que descargar antes de poder mostrar el texto con la tipografía correcta. Eso introduce latencia, y en conexiones lentas el efecto es visible.

El flujo básico

1. El navegador descarga el HTML.
2. Parsea el CSS — encuentra una referencia a una fuente externa (en @font-face o en la hoja de Google Fonts).
3. Solicita el archivo de la fuente a la red.
4. Mientras descarga: ¿qué muestra con el texto?

FOIT y FOUT

Hay dos comportamientos posibles mientras la fuente descarga:

Comportamiento	Nombre	Qué ve el usuario
Texto invisible hasta que la fuente carga	FOIT (Flash of Invisible Text)	El layout aparece, pero el texto es invisible
Texto con fuente de fallback, swap al cargar	FOUT (Flash of Unstyled Text)	Texto visible de inmediato con la fuente del sistema; luego cambia a la custom

Sin font-display, Chromium y Firefox bloquean el texto hasta 3 segundos (FOIT). Safari bloquea indefinidamente hasta que la fuente descarga.

font-display: swap

font-display: swap es el descriptor más usado para mejorar el rendimiento percibido:

@font-face {
  font-family: "Roboto";
  src: url("roboto.woff2") format("woff2");
  font-display: swap;   /* texto visible de inmediato con fallback; swap al cargar */
}

Con swap, el usuario ve texto siempre — con la fuente del sistema hasta que Roboto esté lista, y luego cambia. Puede haber un pequeño “salto” visual cuando se hace el swap, pero es preferible a texto invisible.

Google Fonts ya incluye display=swap en la URL que genera (?family=Roboto&display=swap). Al usar Google Fonts con ese parámetro, el font-display: swap está configurado automáticamente en el @font-face que Google inyecta.

preconnect — reducir la latencia

Los dos <link rel="preconnect"> de Google Fonts que viste en L-1 sirven exactamente para esto: establecen conexión anticipada con los servidores de Google antes de que el CSS haya pedido la fuente, reduciendo el tiempo de espera de la primera solicitud.

---

Regla práctica: en producción, las fuentes siempre deben ir en <link> (no @import) y con font-display: swap como mínimo. woff2 solo, sin fallbacks legacy.