WOFF y WOFF2: Guía Completa de Formatos de Fuentes Web
El Panorama de los Formatos de Fuentes
Antes de que la web tuviera sus propios formatos de fuentes, los diseñadores dependían de un puñado de fuentes "seguras para la web" instaladas en casi todos los sistemas operativos: Arial, Georgia, Times New Roman, Verdana. La llegada de @font-face en CSS abrió la puerta a la tipografía personalizada, pero trajo consigo un caótico surtido de formatos: TTF (TrueType Font), OTF (OpenType Font), EOT (Embedded OpenType, un formato de Microsoft exclusivo de IE), e incluso fuentes SVG (usadas brevemente en el primer Safari de iOS). Cada navegador requería un formato diferente, obligando a los desarrolladores a servir múltiples archivos y escribir complejas pilas de CSS con fallbacks.
TrueType y OpenType son formatos orientados al escritorio, diseñados para renderizar en pantalla e impresión. No incluyen compresión nativa y nunca fueron diseñados para encapsular metadatos de licencias para distribución web. EOT fue la respuesta propietaria de Microsoft, pero nunca logró soporte universal. Las fuentes SVG fueron una curiosidad — describían glifos mediante rutas SVG — y finalmente fueron abandonadas por completo.
La web necesitaba algo mejor: un formato con compresión, encapsulación de licencias y soporte universal en navegadores.
WOFF: Web Open Font Format 1.0
WOFF 1.0 fue desarrollado en 2009 mediante la colaboración entre Mozilla, Opera y Microsoft, y presentado al W3C. Se convirtió en Recomendación W3C en diciembre de 2012. WOFF no es un formato de fuente nuevo en el sentido tradicional — es un contenedor que envuelve datos de fuentes TrueType u OpenType con dos adiciones importantes:
- Compresión zlib — Los datos de las tablas de fuentes se comprimen usando zlib (el mismo algoritmo detrás de gzip), reduciendo el tamaño de los archivos aproximadamente un 40% en comparación con el TTF u OTF equivalente.
- Bloque de metadatos — WOFF incluye un bloque de metadatos XML dedicado donde las fundiciones tipográficas pueden incorporar información de licencia, avisos de copyright y términos de uso. Esto fue un requisito clave para que los proveedores de fuentes estuvieran dispuestos a distribuir sus tipos para uso web.
WOFF logró un amplio soporte en navegadores rápidamente: Internet Explorer 9 (lanzado en 2011) fue la primera versión de IE que lo soportó, y todos los demás navegadores principales siguieron. Para 2012, WOFF tenía soporte universal.
WOFF2: Compresión Brotli y Mejor Rendimiento
WOFF2 fue desarrollado por ingenieros de Google y se convirtió en Recomendación W3C en marzo de 2018. La mejora clave es el algoritmo de compresión: en lugar de zlib, WOFF2 usa Brotli, un algoritmo de compresión moderno también desarrollado por Google. El resultado son archivos de fuentes aproximadamente un 30% más pequeños que los archivos WOFF1 equivalentes — y un 50–60% más pequeños que los archivos TTF sin procesar.
Para una fuente web típica, esto puede significar la diferencia entre un archivo WOFF de 60 KB y un archivo WOFF2 de 40 KB. Multiplicado por todos los pesos y estilos de fuente en una página, el ahorro es significativo para el rendimiento de carga.
WOFF2 también introdujo mejoras en la transformación de datos de glifos antes de la compresión, permitiendo que el compresor Brotli trabaje de manera más eficiente con la naturaleza estructurada de las tablas de fuentes.
El soporte de navegadores para WOFF2 llegó a todos los navegadores principales para 2016 (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+). A partir de 2024, el soporte global de WOFF2 supera el 97% de los navegadores en uso.
Tabla de Soporte por Navegador
| Formato | IE | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|---|
| WOFF | 9+ | 5+ | 3.6+ | 5.1+ | 12+ |
| WOFF2 | No | 36+ | 39+ | 10+ | 14+ |
La conclusión práctica: los proyectos web modernos pueden apuntar de forma segura solo a WOFF2. Agregar un fallback WOFF sigue siendo razonable si necesitas soportar IE 11.
Subsetting de Fuentes: La Optimización Más Importante
Los archivos de fuentes sin procesar — especialmente aquellos con amplia cobertura Unicode — pueden ser enormes. Una fuente que cubra caracteres latinos, cirílicos, griegos y CJK podría pesar 2–4 MB. El subsetting de fuentes elimina todos los caracteres que no se usan en tu sitio, conservando solo los glifos que necesitas.
La herramienta estándar es pyftsubset, parte de la biblioteca Python fonttools:
pip install fonttools brotli
pyftsubset font.ttf \
--output-file=font.woff2 \
--flavor=woff2 \
--layout-features=* \
--unicodes=U+0020-007E,U+00A0-00FF
glyphhanger (de Zach Leatherman) va más lejos: rastrea tus páginas reales y determina automáticamente qué caracteres se usan, luego genera el subset por ti. Esto puede reducir una fuente de 500 KB a 20–40 KB para un sitio solo en caracteres latinos.
Google Fonts sirve automáticamente fuentes con subset basándose en el descriptor unicode-range en @font-face, por lo que cada idioma recibe solo los glifos que necesita.
La Regla CSS @font-face
El patrón estándar para cargar una fuente WOFF2 en CSS:
@font-face {
font-family: 'MiFuente';
src: url('/fonts/mifuente.woff2') format('woff2'),
url('/fonts/mifuente.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
El descriptor font-display: swap es fundamental para el rendimiento. Sin él, el navegador puede mostrar texto invisible (FOIT — Flash of Invisible Text, destello de texto invisible) mientras carga la fuente. swap indica al navegador que renderice el texto de inmediato con una fuente de respaldo, y luego cambie a la fuente personalizada cuando esté lista.
Estrategias de Carga de Fuentes
Más allá de font-display, puedes usar el hint <link rel="preload"> para iniciar las descargas de fuentes lo antes posible:
<link rel="preload" href="/fonts/mifuente.woff2" as="font" type="font/woff2" crossorigin>
El atributo crossorigin es obligatorio incluso para fuentes del mismo origen. La precarga adelanta la descarga de la fuente en el orden de carga del navegador, reduciendo el tiempo hasta que se muestra la fuente correcta.
Convertir TTF/OTF a WOFF2
Existen varias opciones de conversión:
- fonttools / pyftsubset (recomendado, gratuito, automatizable): Maneja el subsetting y la salida WOFF2 en un solo paso.
- Transfonter (transfonter.org): Basado en navegador, soporta conversión por lotes, subsetting e incorporación en base64. Excelente para conversiones puntuales sin instalar Python.
- Font Squirrel Webfont Generator: Produce un kit completo de fuentes web con CSS, múltiples formatos y opciones de subsetting.
Ten en cuenta que la conversión por sí sola no te otorga derechos para usar una fuente en la web. Consulta la sección de licencias más abajo.
Alojamiento Propio vs Google Fonts
Google Fonts sirve fuentes desde la CDN de Google, que es rápida, gratuita y maneja automáticamente el subsetting y la entrega en WOFF2. Las contrapartidas:
- Privacidad: El navegador de cada visitante realiza una solicitud a los servidores de Google, dándole visibilidad sobre tu tráfico. Esto tiene implicaciones GDPR en la UE.
- Caché: El mito de que todos los sitios que comparten una URL de CDN de Google Fonts se benefician del caché entre sitios fue invalidado por el caché particionado de los navegadores (introducido en Chrome 86, Firefox 85). Cada sitio ahora tiene su propia partición de caché.
- Rendimiento: Obtener recursos de un dominio externo añade la sobrecarga de búsqueda DNS + conexión. El alojamiento propio elimina esto.
El alojamiento propio es generalmente recomendado para proyectos conscientes de la privacidad y para el máximo control del rendimiento. Usa herramientas como google-webfonts-helper (gwfh.mranftl.com) para descargar archivos WOFF2 correctamente sub-seteados de Google Fonts para alojamiento propio.
Fuentes Variables y WOFF2
Las fuentes variables son un avance importante: un único archivo de fuente contiene un espacio de diseño continuo a través de ejes como peso, anchura e inclinación. En lugar de cargar archivos separados para Regular, Bold, Italic y Bold Italic, un único archivo de fuente variable cubre todas las variantes. Las fuentes variables se entregan como WOFF2 y son compatibles con todos los navegadores modernos desde 2018.
@font-face {
font-family: 'MiFuenteVariable';
src: url('/fonts/mifuente-variable.woff2') format('woff2');
font-weight: 100 900;
}
El tamaño del archivo de una fuente variable es mayor que el de un único peso, pero menor que cargar 4 o más archivos de pesos separados.
Fuentes de Iconos como WOFF2
Las bibliotecas de fuentes de iconos como Font Awesome y Material Icons se distribuyen como WOFF2. Funcionan exactamente como las fuentes de texto, pero mapean puntos de código del área de uso privado de Unicode a glifos de iconos. Aunque los sprites SVG han reemplazado en gran medida a las fuentes de iconos para nuevos proyectos (mejor accesibilidad, coloración más sencilla), las fuentes de iconos WOFF2 siguen siendo ampliamente utilizadas y funcionan bien cuando se hace subsetting solo a los iconos realmente usados.
Licencias de Fuentes
Convertir una fuente de TTF a WOFF2 no cambia su licencia. La mayoría de las fuentes comerciales tienen licencia solo para uso en escritorio y prohíben explícitamente la incorporación web sin una licencia web separada. Antes de convertir y alojar cualquier fuente por tu cuenta, verifica:
- ¿Se permite la incorporación web?
- ¿Hay un límite de páginas vistas en la licencia web?
- ¿La licencia permite modificación (necesaria para el subsetting)?
Las fuentes de Google Fonts (licencia SIL Open Font o Apache 2.0) y las fuentes verificadas de Font Squirrel son seguras para uso web, incluyendo subsetting y alojamiento propio.
El Futuro: Fuentes de Color
El formato de fuentes de color COLRv1, soportado en Chrome 98+ y Firefox 107+, permite fuentes con degradados y glifos de color complejos — fuentes de emoji, fuentes decorativas — entregadas como WOFF2. La fuente Noto Color Emoji de Google es un ejemplo destacado. A medida que el soporte de COLRv1 se amplíe, se espera que la tipografía en color se convierta en una capacidad de diseño web convencional, todo entregado a través del ya maduro contenedor WOFF2.
Conversiones relacionadas
Conversiones frecuentes del catálogo: