En una frase
El subsetting y la conversión de fuentes es como armar la mochila para una escapada de fin de semana: en lugar de arrastrar una maleta de 6,000 caracteres llena de alfabeto cirílico y dingbats que jamás vas a usar, empacas exactamente las letras que necesitas en una mochila súper comprimida y lista para la web.
El problema que resuelve
Si hacías sitios web en 2005, tu paleta tipográfica era básicamente una situación de rehenes. Tenías Arial, Times New Roman, Georgia, Verdana, y tal vez Comic Sans si querías ver el mundo arder. Estas eran las fuentes "web-safe" (seguras para la web)—lo que significaba cruzar los dedos y rezar para que ya estuvieran instaladas en el sistema operativo del usuario.
Luego llegó la revolución de @font-face. De repente, los diseñadores podían incrustar la tipografía custom que quisieran. La web se volvió hermosa, pero también increíblemente lenta.
Las fuentes de escritorio estándar (TrueType u OpenType) están diseñadas para impresión y soporte de idiomas universal. Un solo archivo .ttf puede contener miles de glyphs, soportando inglés, griego, vietnamita, símbolos matemáticos especializados y veinte variaciones del ampersand. Esto es fantástico para un procesador de textos, pero catastrófico para un navegador web sufriendo con una conexión 3G inestable. Descargar un archivo de fuente de 400KB bloquea el renderizado, provocando el temido "Flash of Unstyled Text" (FOUT) o, peor aún, el "Flash of Invisible Text" (FOIT).
Necesitábamos dos cosas para curar esta obesidad tipográfica:
- Mejor compresión diseñada específicamente para la web (de ahí formatos como WOFF y WOFF2).
- Subsetting, la extirpación quirúrgica de cada carácter y tabla de idioma que un sitio web específico realmente no necesita.
Cómo funciona bajo el capó
Para entender cómo encogemos las fuentes, tienes que entender qué es realmente un archivo de fuente. Una fuente moderna (como TTF u OTF) no es solo una carpeta de dibujitos vectoriales. Es una base de datos binaria compleja basada en el formato contenedor SFNT.
La anatomía de una fuente
Dentro de un contenedor SFNT, la data se organiza en tablas específicas:
glyfoCFF: Los dibujos vectoriales reales (las curvas y líneas de las letras).cmap: El mapa de caracteres, que traduce un punto Unicode (comoU+0041para la 'A') al dibujo específico en la tablaglyf.GSUB/GPOS: Features avanzadas de OpenType como ligaduras (conectar la 'f' y la 'i') y kerning (el espaciado entre pares de letras específicos).name: Metadata como el nombre de la fuente, copyright y la info del diseñador.
La magia del Subsetting
Cuando le haces subsetting a una fuente, un parser abre de un golpe este contenedor SFNT. Le pasas una lista de caracteres—digamos, solo el alfabeto inglés básico, números y puntuación común.
El parser no se limita a borrar los vectores sin usar de la tabla glyf. Tiene que reconstruir meticulosamente toda la base de datos. Reescribe el cmap para eliminar los puntos Unicode abandonados. Peina las tablas GSUB y GPOS, arrancando pares de kerning de letras que ya no existen para asegurar que el archivo no se rompa. Finalmente, recalcula los offsets de memoria para los headers del archivo.
Una fuente estándar de 300KB puede bajar fácilmente a 15KB cuando le haces subsetting a solo caracteres latinos básicos.
La guerra de formatos: WOFF y WOFF2
Una vez que la fuente tiene su subsetting, es hora de comprimirla.
| Formato | Tecnología de Compresión | El Veredicto |
|---|---|---|
| TTF / OTF | Ninguna (Normalmente) | Genial para apps de diseño de escritorio. Pésima para entregar en la web. |
| WOFF | Zlib | El Web Open Font Format original. Bueno, pero anticuado. |
| WOFF2 | Brotli | El estándar moderno. Transforma las tablas de la fuente antes de comprimirlas. |
WOFF2 es el rey indiscutible de las web fonts. No agarra simplemente un TTF y lo zipea. WOFF2 transforma físicamente las tablas SFNT—específicamente agrupando tipos de data similares—para que el algoritmo de compresión Brotli subyacente pueda encontrar patrones repetidos más largos. Esto da como resultado archivos hasta 30% más ligeros que WOFF1, y potencialmente 95% más pequeños que el TTF original si lo combinas con subsetting.
Juntando todo con CSS
Una vez que tienes tu archivo WOFF2 con subsetting y súper comprimido, le avisas al navegador usando CSS. La propiedad unicode-range es crucial aquí. Le dice al navegador: "Solo descarga este archivo si un carácter en la página realmente coincide con este rango".
@font-face {
font-family: 'MyCustomFont';
/* Load the highly compressed WOFF2 format */
src: url('mycustomfont-subset.woff2') format('woff2');
/* Only trigger the download if the page uses basic Latin characters */
unicode-range: U+0000-00FF, U+0131, U+0152-0153;
font-display: swap;
}
Historias del mundo real
La catástrofe de "Es solo un Ampersand"
Una agencia de diseño boutique estaba armando una landing page para un restaurante de lujo. La tipografía de los títulos se veía increíble, principalmente porque usaron una fuente cursiva hermosa y adornada exclusivamente para el ampersand (&) en el nombre del restaurante: "Salt & Ash".
Sin embargo, los puntajes de performance en Lighthouse estaban súper en rojo. Los devs se dieron cuenta de que estaban obligando a los usuarios a descargar un archivo TTF de 250KB solo para renderizar un miserable carácter. Al pasar la fuente por un subsetter y extraer solo el carácter & (Unicode U+0026), generaron un archivo WOFF2 que pesaba unos ridículos 800 bytes.
La lección: Nunca cargues una familia tipográfica completa para capitulares decorativas, íconos o caracteres sueltos. Haz subsetting agresivo.
El Megabyte Multilingüe
Una empresa SaaS localizó su sitio de marketing para usuarios en Japón y Corea del Sur. Para mantener el branding consistente, incrustaron una fuente CJK (Chino, Japonés, Coreano) muy respetada. Las fuentes CJK son notoriamente masivas porque contienen decenas de miles de ideogramas. El archivo pesaba 4.5MB.
De repente, sus usuarios en EE. UU. y Europa estaban esperando segundos a que apareciera el texto, porque el navegador estaba descargando 4.5MB de caracteres asiáticos que nunca verían. El equipo de ingeniería arregló esto haciendo subsetting de la fuente maestra en múltiples "chunks" más pequeños (un WOFF2 para Latín Básico, otro para Hiragana/Katakana, etc.) y desplegándolos con bloques @font-face usando descriptores unicode-range estrictos. Ahora los navegadores solo descargaban el chunk latino de 15KB para los usuarios en inglés.
La lección: Usa subsetting y unicode-range para servir chunks tipográficos dinámicamente según las necesidades reales de idioma del usuario.
Errores comunes y trampas
- Borrar la barra espaciadora por accidente: Al escribir los caracteres literales para tu subsetting (ej.
abcdefghijklmnopqrstuvwxyz), los devs a menudo olvidan incluir el carácter de espacio (U+0020). Sin él, tu fuente custom tan cuidadosamente elegida va a caer en el fallback de Arial cada vez que haya un espacio entre palabras, resultando en una estética horripilante tipo nota de rescate. - Servir formatos legacy sin necesidad: Muchos devs todavía generan y sirven fuentes EOT, TTF y SVG en su stack de CSS "por si acaso". No lo hagas. WOFF2 está soportado por más del 97% de los navegadores a nivel global. Sirve WOFF2, tal vez ofrece WOFF como fallback para navegadores prehistóricos, y párale de contar.
- Eliminar features esenciales de OpenType: Las herramientas de subsetting agresivo a veces ofrecen quitar las tablas
GSUByGPOSpara ahorrar unos cuantos kilobytes extra. Si tu fuente depende de ligaduras complejas (como convertir->en una flecha) o depende mucho del kerning para no verse espantosa, quitar estas tablas va a arruinar la tipografía. - Olvidar
font-display: swap: Incluso un WOFF2 enano de 12KB con subsetting toma unos milisegundos en descargar. Si no incluyesfont-display: swapen tu CSS, los navegadores modernos van a ocultar tu texto por completo hasta que llegue la fuente. Dale a tus usuarios texto del sistema para leer mientras la fuente custom está en camino.
Por qué debería estar en tu radar
Las web fonts son históricamente unas de las peores ofensoras cuando se trata de arruinar los Web Vitals. Si te importa el Largest Contentful Paint (LCP) o el Cumulative Layout Shift (CLS), tiene que importarte cómo entregas las fuentes.
Deberías pensar en subsetting y conversión de fuentes en el instante en que recibes un archivo .ttf u .otf de un diseñador o lo descargas de una fundición. Servir fuentes de escritorio crudas en la web es el equivalente a servir una imagen bitmap cruda y sin comprimir de 10MB en lugar de un WebP.
Al convertir a WOFF2 y quitar los miles de glyphs que no estás usando, reduces los costos de ancho de banda, bajas la huella de carbono de tu aplicación, y aseguras que tu sitio sea realmente legible en el milisegundo en que un usuario da clic en tu link.
Para profundizar
- MDN Web Docs: @font-face - La biblia absoluta sobre cómo implementar custom fonts y usar
unicode-rangecorrectamente en CSS. - Especificación WOFF2 de la W3C - La especificación técnica oficial que detalla exactamente cómo WOFF2 transforma y comprime las tablas SFNT.
- RFC 7932: Brotli Compressed Data Format - La documentación de la IETF sobre el algoritmo de compresión que le da a WOFF2 sus superpoderes.
- Web.dev: Optimiza tus WebFonts - La guía definitiva de Google para minimizar el payload de las web fonts y prevenir layout shifts.
- Google Fonts Knowledge: ¿Qué es una fuente? - Un clavado profundo en la estructura de tablas SFNT y cómo se guardan los glyphs bajo el capó.