WOFF2

¿Qué es un archivo WOFF2?

El formato actual de fuente web, alrededor de un 30 % más pequeño que WOFF.

Qué es WOFF2

WOFF2 es un formato binario, que solo significa algo para un programa que lo conoce. Se usa para la web.

La extensión es .woff2 y el nombre completo, Web Open Font Format 2. Ambos importan menos que lo que el archivo puede contener, y de eso trata el resto de esta página.

De dónde viene WOFF2

W3C lo publicó en 2018. La especificación es WOFF 2.0.

La edad interesa por un motivo práctico: cuanto más antiguo es un formato, más programas han tenido tiempo de aprenderlo.

La especificación es pública

Está publicada entera, así que cualquiera puede implementarla leyendo el documento en vez de a base de inspeccionar archivos. Por eso aparece en tantos programas, y por eso los archivos escritos hace veinte años siguen abriéndose hoy. Publicada no quiere decir libre de regalías: cuando un formato envuelve un códec, la licencia de las patentes es un asunto aparte que la norma no resuelve.

No se tira nada

WOFF2 guarda su contenido exactamente. Volver a guardarlo no cambia nada, así que puedes abrirlo, editarlo y guardarlo tantas veces como quieras sin acumular daño; eso es lo que lo convierte en un formato de trabajo y no de entrega.

Qué abre WOFF2

fonttools y FontForge lo leen, y también la mayoría de programas del mismo tipo.

Cuando un archivo no se abre, el formato rara vez es el problema: lo más habitual es que el programa sea anterior al formato. Convertir a algo más antiguo es la salida fiable, y para eso está el resto de este sitio.

Abrirlo en el navegador

Cualquier navegador actual lo lee.

Eso lo convierte en algo que puedes poner en una página o adjuntar a un mensaje sin preguntarte qué tiene instalado el otro lado.

Es un formato de entrega

WOFF2 está pensado para entregarse, no para trabajar dentro. Editar uno es posible y rara vez agradable; lo sensato es cambiar el original y volver a exportar.

Es un envase de transporte, no una clase nueva de tipografía

WOFF2 no es un formato de letra en el sentido en que lo son TrueType y OpenType. Es una envoltura: las mismas tablas de la tipografía, comprimidas con Brotli y afinadas para la forma concreta en que se organizan los datos de una fuente, más un poco de metadatos. Desenvuelve un WOFF2 y lo que sale es el TTF o el OTF que entró.

De ahí que sea la única opción sensata para una web y completamente inútil en el escritorio. Existe para que el archivo pese menos durante el viaje, típicamente entre un treinta y un cincuenta por ciento menos que el original, y los sistemas operativos no lo instalan porque no hay nada que instalar que el original no tuviera ya.

Declararlo en CSS sin dejar que el navegador invente la negrita

Una tipografía llega a una página mediante una regla `@font-face`: un nombre de familia, el archivo, y el grosor y el estilo que ese archivo representa. El nombre es arbitrario y local a tu hoja de estilos —no tiene por qué coincidir con el que le puso la fundición— y las declaraciones de grosor y estilo son lo que permite al navegador elegir el archivo correcto cuando el texto se pone en negrita o en cursiva.

El error más común es declarar un solo archivo para una familia y luego usar negrita en el diseño. El navegador no se negará: sintetizará una negrita engordando el trazo del peso normal, y el resultado es visiblemente peor que la negrita de verdad que está sin usar en la misma carpeta. Una regla `@font-face` por archivo, con valores honestos de grosor y estilo, es toda la disciplina que hace falta.

Recortar el juego de caracteres importa más que el formato

Una tipografía comercial corriente cubre latino, latino extendido, cirílico, griego, símbolos de moneda y varios cientos de glifos que nadie va a escribir en tu sitio. Todo eso se lo descarga cada visitante.

El recorte lo reduce a los caracteres que de verdad se usan, y el ahorro suele ser bastante mayor que el que consigue la compresión. Una tipografía de escritorio de 300 KB recortada a latino básico y pasada a WOFF2 se queda habitualmente en unos 25 KB. Haz las dos cosas, en ese orden, y ten cuidado con la herramienta de recorte: si le dices que conserve solo los caracteres usados, se llevará por delante también las tablas de ligaduras y alternativas, y el CSS que las activaba dejará de hacer nada.

El destello de texto invisible

Un navegador al que se le ha dicho que use una tipografía que todavía no ha descargado tiene que decidir qué hace mientras tanto con el texto. Por defecto espera —hasta tres segundos en casi todos— y no muestra nada. Eso es el destello de texto invisible, y es el motivo más frecuente de que un sitio con letra propia se sienta lento.

El arreglo es una línea: `font-display: swap` dentro de la regla `@font-face`. El texto se dibuja de inmediato con una tipografía de reserva y se recompone cuando llega la buena. La recomposición se ve, y es muchísimo menos grave que una página en blanco. `font-display: optional` va más lejos: si la fuente no está casi al instante, esa visita no la usa, lo que elimina la recomposición a cambio de que algunos visitantes nunca vean la tipografía.

Alojarla tú en lugar de enlazar un servicio

Cargar tipografías desde un servicio ajeno era más rápido porque los visitantes llegaban con el archivo ya guardado en caché desde otro sitio. Eso dejó de ser cierto cuando los navegadores separaron la caché por sitio: hoy cada visitante se la descarga otra vez, y la petición cuesta además una conexión adicional a otro servidor antes de que la fuente empiece siquiera a llegar.

Alojarla tú es ahora la opción más rápida en casi todos los casos, y además quita a un tercero del camino de las peticiones, cosa que importa tanto para la protección de datos como para que tu sitio siga funcionando cuando el servicio de otra persona no lo haga. Precargar la una o dos tipografías que aparecen en la primera pantalla es el truco que queda por aplicar.

¿Hace falta todavía un WOFF de respaldo?

No. WOFF2 lleva años admitido por todos los navegadores actuales, Safari y los móviles incluidos, y la pila de reservas que acompañaba a cada `@font-face` —WOFF, TTF, EOT, SVG— es hoy arqueología.

Declarar solo WOFF2 es el consejo vigente. Lo que no sepa leerlo es lo bastante viejo como para caer en una tipografía del sistema, que es un desenlace perfectamente aceptable y bastante mejor que servirle a todo el mundo cinco copias de la misma letra para que un navegador que ya no usa nadie reciba la que prefiere.

Convertir aquí cambia el envase, nunca los trazos

La conversión entre formatos de tipografía es literalmente un reempaquetado: se cambia la etiqueta del contenedor y se vuelve a guardar. Las curvas, el espaciado, el interletraje y las tablas de sustitución salen exactamente como entraron, así que pasar un WOFF2 a TTF, a OTF o a WOFF no puede degradar la letra.

Con una salvedad que merece la pena entender. Dentro de una tipografía las curvas son cuadráticas, como en TrueType, o cúbicas de PostScript guardadas en una tabla `CFF`, como en OpenType, y eso no se puede cambiar reempaquetando: sería redibujar la letra. Aquí se detecta cuál de las dos hay dentro mirando esa tabla, y si pides un TTF de una tipografía con curvas de PostScript la conversión se rechaza con un error, en lugar de entregarte un archivo con la extensión equivocada. EOT tampoco está admitido, porque la herramienta que hace este trabajo no lo conoce y el formato es una reliquia de la época de Internet Explorer.

Estas conversiones no ocurren en tu navegador: el archivo se envía a la API de conversión, se reempaqueta dentro de un contenedor sin salida a internet y la carpeta del trabajo se borra al acabar. El límite son 25 MB por archivo, frente a los 100 MB de las conversiones que sí se quedan en tu equipo, y el cupo de conversiones en servidor es de cien al día, contado contra un hash diario con sal de tu dirección y reiniciado a medianoche UTC.

La licencia, que es la parte que se olvida

Convertir una tipografía de escritorio a WOFF2 lleva segundos y con frecuencia incumple la licencia con la que vino. Las licencias de escritorio cubren instalar la letra en unos cuantos equipos y usarla para hacer cosas; el uso web suele ser una licencia aparte, que se vende aparte y a menudo se factura por visitas mensuales.

Las licencias abiertas son la excepción que conviene conocer: las tipografías publicadas bajo la SIL Open Font License se pueden convertir, alojar y recortar libremente, siempre que no se vendan por sí solas y no se reutilicen los nombres reservados. Eso cubre buena parte de lo que hay en los repositorios de tipografías gratuitas, y explica que tanta web esté compuesta con un puñado de familias abiertas.

Los datos, en un solo sitio

Identificadores y procedencia del formato WOFF2.
Extensión.woff2
Tipo de mediofont/woff2
Publicado porW3C
Primera publicación2018
EspecificaciónWOFF 2.0