WOFF2

WOFF2 fue desarrollado por Google y se convirtió en una recomendación W3C en marzo de 2018. Se basa en el concepto original de WOFF, pero reemplaza la compresión zlib con Brotli — un algoritmo de compresión también desarrollado por Google — que logra ratios de compresión significativamente mejores.

Pero WOFF2 no es simplemente «WOFF con mejor compresión». Introduce una transformación de preprocesamiento que reestructura los datos de la fuente antes de la compresión, haciéndolos sustancialmente más comprimibles. Para los contornos TrueType, esto significa aplicar codificación predictiva a las coordenadas de los glifos — codificando cada punto como un delta respecto a un valor predicho en lugar de como una coordenada absoluta. El resultado es un flujo de bytes mucho más redundante que Brotli puede comprimir agresivamente.

Este enfoque en dos pasos — preprocesamiento específico del dominio seguido de compresión de propósito general — es la razón por la que WOFF2 produce consistentemente los archivos de fuente más pequeños de cualquier formato.

WOFF2 aplica un pipeline de compresión de dos fases a los datos fuente de la fuente:

• Fase 1: transformación de preprocesamiento — las transformaciones específicas de fuentes reestructuran los datos para maximizar la compresibilidad. Para los contornos de glifos TrueType, esto usa codificación predictiva de coordenadas — cada punto se codifica como la diferencia respecto a una posición predicha, lo que produce números mucho más pequeños. Se aplican transformaciones similares a otras tablas de fuentes.
• Fase 2: compresión Brotli — los datos preprocesados se comprimen luego con Brotli, que combina la compresión de ventana deslizante LZ77 con codificación Huffman y un diccionario estático incorporado. Brotli logra una compresión 20-30 % mejor que zlib en datos de fuentes típicos.

En el lado del navegador, el proceso se invierte: descompresión Brotli seguida de transformaciones inversas para reconstruir las tablas de fuentes originales. A pesar del paso adicional, la descompresión de WOFF2 es en realidad más rápida que la de WOFF1 — Brotli fue diseñado para una decodificación rápida, y el archivo más pequeño se transfiere más rápido por la red.

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2');
  font-display: swap;
}

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

Observe que solo listamos un único src — WOFF2 solo. Con una cobertura de navegadores del 97 %+, muchos proyectos modernos ya no necesitan un formato de alternativa. La directiva font-display: swap le dice al navegador que muestre texto inmediatamente usando una fuente alternativa mientras se carga la fuente de iconos, evitando el texto invisible.

WOFF2 cuenta con amplia compatibilidad en todos los navegadores modernos. La única brecha notable es Internet Explorer, que fue retirado por Microsoft en junio de 2022.

La cobertura global combinada se sitúa en aproximadamente 97 %. El ~3 % restante consiste casi en su totalidad en instalaciones de IE heredadas y navegadores móviles muy antiguos.

Para ilustrar la ventaja de compresión de WOFF2, aquí están los tamaños de archivo típicos para una fuente de iconos con 200 glifos:

El ahorro se acumula con conjuntos de iconos más grandes. Una fuente de 500 glifos podría ser de 200 KB como TTF, 120 KB como WOFF y solo 82 KB como WOFF2. A lo largo de miles de cargas de página, estos kilobytes se traducen directamente en tiempos de renderizado más rápidos y menores costos de ancho de banda.

Siempre. WOFF2 debe ser el formato predeterminado para cualquier despliegue de fuentes de iconos en la web. Ofrece los archivos más pequeños, la descompresión más rápida y compatibilidad casi universal con los navegadores.

El único escenario en el que no usaría WOFF2 es si está apuntando a Internet Explorer — en cuyo caso, combínelo con WOFF como alternativa:

@font-face {
  font-family: 'MyIcons';
  src: url('icons.woff2') format('woff2'),
       url('icons.woff') format('woff');
  font-display: swap;
}

Los navegadores modernos tomarán el archivo WOFF2; IE 11 recurrirá a WOFF. Todos obtienen la fuente, todos la obtienen comprimida.