Lo que el WOFF2 le hace a un TTF y el gzip no puede
El TTF y el OTF son formatos de escritorio. Son lo que te vende una fundición tipográfica, lo que instalan Figma y las aplicaciones de Adobe, y lo que guarda la carpeta de fuentes de tu sistema operativo. Nada en su diseño anticipaba que se descargarían por red en la ruta crítica del renderizado de una página.
El WOFF2 son esos mismos datos de fuente dentro de una envoltura construida exactamente para eso. Su ventaja sobre simplemente comprimir el TTF con gzip viene de saber qué está comprimiendo. Antes de que corra la pasada genérica de Brotli, el codificador transforma las tablas de contornos de los glifos en una representación que se comprime mucho mejor: las coordenadas de los puntos se reparten en flujos separados y se recodifican, la tabla de desplazamientos de glifos pasa a ser en buena parte reconstruible en vez de almacenarse, y las sumas de verificación por tabla que un decodificador puede recalcular se descartan. Brotli trabaja entonces sobre datos que ya se han remodelado a su favor. Un compresor de propósito general solo ve bytes opacos y no puede hacer nada de eso, y por eso el resultado es más pequeño que la misma fuente entregada a la compresión de transporte genérica: porque la transformación entiende qué significan los bytes.
En la práctica, eso es un retraso menos con forma de bloqueo del renderizado antes de que tu texto aparezca en la tipografía correcta. La herramienta muestra un total de antes y después para el lote entero, más el tamaño de cada archivo que devuelve, para que veas el número real de tu fuente real en lugar de fiarte de un rango.
Elegir dirección antes de soltar el archivo
- Ajusta la Dirección. La opción por defecto, de TTF/OTF a WOFF2, es el caso de una web. Cámbiala solo si vas hacia atrás.
- Suelta una fuente o varias en la caja. Los lotes se procesan en secuencia y la barra de progreso sigue los archivos terminados.
- Pulsa el botón de convertir. Un lote pequeño de fuentes termina sin una espera apreciable.
- Recoge las descargas y revisa la comparación de tamaños.
La dirección es un interruptor de verdad y no una pista, y es deliberado. Entrégale un .woff2 a la
dirección hacia delante y obtienes un error que nombra tu archivo y te dice qué opción cambiar, en
lugar de un resultado sin sentido comprimido dos veces. Lo mismo pasa al revés con un .ttf. Adivinar
a partir de la extensión habría sido fácil de escribir y habría hecho lo incorrecto en silencio para
cualquiera cuyo archivo estuviera mal nombrado, así que hicimos la elección explícita y el desajuste
ruidoso.
El archivo @font-face, y de dónde sale el nombre de familia
Convertir hacia delante te da dos descargas por fuente: el .woff2 en sí y un pequeño archivo .css
con una regla @font-face completa, con la URL de src ya apuntando al nombre del archivo convertido,
font-display: swap puesto, y el nombre de familia relleno.
Ese nombre se lee de la fuente y no se adivina. Las fuentes llevan una tabla de nombres con registros
numerados, y buscamos primero el nombre de familia tipográfico, cayendo al nombre de familia normal, y
prefiriendo el registro de la plataforma Windows sobre el antiguo de Macintosh cuando una fuente trae
los dos. Los registros de Windows son UTF-16 y los de Mac de un solo byte, así que hay que
decodificarlos de forma distinta; equivocarse ahí produce nombres de familia con un byte nulo entre
cada letra, que es un error clásico y muy visible. Cuando la tabla no se puede leer en absoluto, el
nombre sale de tu nombre de archivo con los separadores convertidos en espacios, así que
Inter-Regular.ttf se convierte en Inter Regular. Las comillas y las barras invertidas de un nombre
de familia se escapan para CSS.
Lee el fragmento antes de pegarlo. Las líneas de grosor y estilo son marcadores de posición, como explican las preguntas frecuentes de abajo, y una familia de cuatro estilos estáticos necesita cuatro reglas con cuatro valores de grosor distintos y no cuatro copias del mismo. Una vez las reglas están en su sitio, minificar el CSS aprieta la hoja de estilos que las referencia.
Volver a TTF, y para qué sirve esa dirección
La dirección inversa existe para una situación concreta: la única copia que tienes de una tipografía es el recurso comprimido que sirve un sitio, y necesitas algo que abra un editor de fuentes. La decodificación no tiene pérdida en el sentido que importa, porque todos los datos de contorno y de métrica se reconstruyen fielmente, pero el archivo resultante es un sfnt recién construido y no una copia idéntica bit a bit de lo que fuera el original. Para esta dirección no se genera ningún fragmento de CSS, porque un TTF no es lo que deberías estar poniendo en una web.
Ten presente que poder decodificar una fuente no dice nada sobre si tienes permiso para usarla. Sacar una webfont del panel de red de un sitio e instalarla en local es una cuestión de licencias, no técnica. Si lo que buscas en realidad es un conjunto pequeño de iconos y no una tipografía, un juego de favicons del generador de favicons o un vector limpio del optimizador de SVG te van a servir muchísimo mejor que un archivo de fuente extraído.
Por qué el codificador corre en tu pestaña y no en nuestro servidor
El motor de aquí es wawoff2, una compilación a WebAssembly del codificador y decodificador woff2 de
referencia de la propia Google, que es la misma base de código que envuelven las herramientas de línea
de comandos y los plugins de compilación. Revisamos los enlaces compilados en busca de
SharedArrayBuffer y de uso de pthreads antes de adoptarlo y no encontramos ninguno, algo que importa
en este sitio porque las cabeceras COOP y COEP que exige el WebAssembly con hilos romperían nuestros
marcos de anuncios. El binario wasm va incrustado en el JavaScript como data URI, así que tampoco hay
ninguna descarga de recurso extra en tiempo de ejecución.
Lo que eso significa para ti es que una tipografía comercial con licencia, o una fuente a medida que un diseñador cortó para una marca, no viaja a ninguna parte para que le cambien el contenedor. Se lee, se convierte y se devuelve dentro de la pestaña. Los archivos de fuente están entre los recursos con licencias más estrictas que lleva un sitio, y “solo la subimos para convertir el formato” no es una distinción que reconozcan la mayoría de los acuerdos de licencia.