Fuentes web: WOFF2 es el 64% fácil, el subsetting es el otro 30

Las fuentes bloquean el renderizado y pesan mucho. Un solo peso puede superar a todas las imágenes por encima del pliegue. Dos cambios reducen una fuente web típica a una fracción de lo que pesa un TTF crudo, y la mayoría de sitios no aplica ninguno de los dos.

WOFF2: el 64% gratis

WOFF2 es un envoltorio de fuente que comprime las tablas de glifos con Brotli y una transformación ajustada para datos de fuente. No es una tipografía distinta: es la misma fuente, más pequeña, y está soportada por todos los navegadores en uso.

Convertimos 40 fuentes reales (TTFs de Google Fonts) a WOFF2:

Ese es el cambio de mayor impacto que puedes hacer en una fuente web, y no cuesta nada: mismos glifos, mismo renderizado, un paso de compilación. Si sirves .ttf o incluso .woff, estás enviando de dos a tres veces los bytes sin ninguna razón.

Subsetting: el otro 30

Aquí está la parte que casi nadie hace. Abre el TTF de una Google Font y normalmente lleva mucho más que latín: cirílico, griego, vietnamita, puntuación extendida, símbolos. Un sitio en inglés descarga todo eso y no renderiza nada de ello.

El subsetting elimina los glifos que una página nunca usará. Recortamos las mismas 40 fuentes a un rango latino (0-2AF más puntuación web común y el euro) con hb-subset:

Lee otra vez esa última fila: 22 MB de TTF se convierten en cerca de 1 MB al convertir a WOFF2 y conservar solo los glifos que usa una página en latín, un recorte del 95%. Solo WOFF2 llevó 22 MB a 7 MB; el subsetting llevó 7 MB a 1 MB. Los dos se suman, y el segundo es donde está la sorpresa.

Cómo recortar sin romper nada

El subsetting tiene pérdida en el único sentido que importa: los glifos que quitas desaparecen. Hazlo de forma deliberada.

• Quita solo lo que no sirves. Un sitio en latín recorta a latín. Un sitio multilingüe conserva los rangos que renderiza.
• Usa unicode-range en @font-face. Sirve varios subsets (latino, latino extendido, cirílico…) y deja que el navegador solicite solo los que el texto de una página realmente toca. Es exactamente cómo sirve fuentes Google Fonts, y puedes hacerlo con las tuyas.
• Ten en cuenta el texto generado por el usuario. Si los usuarios pueden escribir cualquier cosa (nombres, emoji, otras escrituras), un subset estrictamente latino mostrará tofu (□) para los glifos que faltan. Mantén un subset más amplio, o una fuente de sistema de reserva, para esas superficies.
• El hinting suele poder eliminarse. En pantallas modernas de alta densidad, el hinting de TrueType aporta poco y cuesta bytes; quitarlo reduce más el archivo, aunque conviene probarlo si das soporte a Windows en baja densidad.

Qué hace Patu con una fuente

Envía a Patu un TTF, OTF o WOFF y devuelve WOFF2. Pásale el texto o los rangos unicode que necesita la página y recorta a ellos en el mismo paso: el camino del 95%, no solo el del 64%.

# convierte + recorta a los glifos que esta página realmente usa
curl -X POST "https://patu.dev/v1/compress?subset-text=$(cat page.txt)" \
  -H "X-Api-Key: $PATU_KEY" -H "Content-Type: font/ttf" \
  --data-binary @Inter.ttf -o Inter.woff2

La conversión a WOFF2 es el cambio que todo el mundo ya debería haber hecho. El subsetting es el que convierte una fuente de una partida real en el peso de la página en un margen de error insignificante.

Método y datos: 40 fuentes reales (TTFs de Google Fonts); WOFF2 vía woffify, subsetting vía hb-subset a 0-2AF,20AC,2018-201F,2010-2014. Las reducciones son la mediana frente al TTF de origen; el conjunto es la suma de bytes de las 40 fuentes.