Generador de incrustación Base64 para WOFF2 | Una petición HTTP menos en tu paquete CSS

Cuando una fuente web auto-alojada se carga como un archivo .woff2 separado, el navegador realiza una petición HTTP adicional después de procesar el CSS. Ese hueco entre el final del parseo del CSS y la llegada de la fuente es justamente cuando aparece el FOUT (Flash of Unstyled Text). Incrustar la fuente como Data URI en base64 dentro de @font-face cierra ambos problemas: el navegador ya tiene la fuente lista en el momento en que la regla se evalúa.

Esta herramienta codifica el .woff2 a base64 en el navegador, te deja configurar font-family, font-weight, font-style y font-display, y produce un bloque @font-face listo para pegar con src: url(data:font/woff2;base64,…) format('woff2'). Sobre la salida aparece el tamaño original frente al tamaño base64 para que veas el coste de la inflación, con un aviso cuando el archivo supera los 100 KB.

💡 Sobre esta herramienta

¿Por qué incrustar la fuente en lugar de servirla desde un CDN? Hasta hace poco, Google Fonts era la respuesta automática para web fonts en Latinoamérica y España. En enero de 2022 el Tribunal Regional de Múnich dictaminó (Az. 3 O 17493/20) que cargar Google Fonts desde un sitio europeo expone la dirección IP del visitante a un servidor estadounidense, contraviniendo el RGPD. Desde entonces muchos equipos han migrado a auto-alojamiento — lo que reintroduce la petición HTTP extra. Inline base64 elimina exactamente esa petición sin renunciar al auto-alojamiento.

La alternativa manual es ejecutar base64 -i font.woff2 en la línea de comandos, pegar el resultado dentro de un bloque @font-face, y construir a mano la URL src con format('woff2'). Esto funciona una vez, pero el ciclo se repite cada vez que cambia la fuente, el nombre font-family o alguna de las cuatro propiedades font-*. La herramienta automatiza ese ciclo. Las comillas simples en el nombre font-family se escapan automáticamente, así que nombres como 'Roboto Mono' o 'IBM Plex Sans Var' se pegan sin romper la sintaxis.

🧐 Preguntas frecuentes

Q. ¿Cuándo es mala idea incrustar un .woff2? A. Por encima de unos 100 KB en crudo, la incrustación empieza a perjudicar el First Contentful Paint en lugar de mejorarlo: el bundle de CSS se infla y pasa a bloquear el render. La herramienta avisa al pasar los 100 KB. Para fuentes más grandes, hace falta crear un subconjunto con unicode-range (eliminar glifos que no usas) o mantener una referencia url() externa con preload.

Q. ¿Por qué base64 añade un ~33% al tamaño? A. Base64 usa 4 bytes ASCII para representar cada 3 bytes binarios (6 bits por carácter × 4 = 24 bits = 3 bytes). Por el cable, la compresión Brotli o gzip del bundle CSS recupera casi toda la inflación — normalmente queda un 10–15% de sobrecoste neto tras la compresión — pero el payload sin comprimir sigue siendo mayor que el .woff2 binario.

Q. ¿Qué valor de font-display conviene? A. Para texto general y titulares, swap es la opción segura: se renderiza una fuente de respaldo inmediatamente y se reemplaza cuando llega la web font. Para fuentes-icono, prefiere block (periodo corto de bloqueo y luego fallback). Para titulares decorativos donde una llegada tardía se ve peor que no cargar, optional autoriza al navegador a saltarse la fuente si no llega en unos 100 ms.

Q. ¿Cómo manejo variantes de negrita e itálica? A. Genera un bloque @font-face separado por cada archivo .woff2, mantén el mismo nombre font-family en todos, y cambia solo font-weight y font-style. El navegador elegirá el correcto cuando el CSS pida font-weight: 700 o font-style: italic. Si tienes una fuente variable que incluye varios pesos en un solo .woff2, escribe un único bloque con font-weight: 100 900 (sintaxis de rango).

Q. ¿La fuente incrustada se cachea aparte? A. No — queda embebida dentro del archivo CSS, así que comparte la vida útil de caché del CSS. Si despliegas CSS muy a menudo y la fuente cambia poco, una referencia url() externa con Cache-Control largo puede rendir mejor en visitas repetidas. La incrustación brilla en el primer paint para visitantes fríos.

Q. ¿Hace falta format('woff2') en el src:? A. No es estrictamente obligatorio en sitios solo-WOFF2, pero permite al navegador saltarse el Data URI si .woff2 no fuera soportado (prácticamente ningún navegador moderno actual, pero la pista es inocua y la herramienta la genera).

📚 Datos curiosos

Los formatos de fuente web evolucionaron como .eot → .ttf → .woff → .woff2, y la versión 2.0 usa compresión Brotli, lo que la hace alrededor de un 30% más pequeña que .woff para el mismo conjunto de glifos. Web Open Font Format 2.0 alcanzó la categoría de W3C Recommendation en marzo de 2018, y desde finales de 2022 es el único formato necesario: Microsoft retiró IE11 de Microsoft 365 en agosto de 2021 y el resto de navegadores soporta .woff2 desde 2015.

El truco de incrustar fuentes como Data URI base64 es anterior al propio .woff2. Los borradores de CSS3 de 2009 ya describían src: url(data:application/x-font-ttf;base64,…) para .ttf, y los primeros kits de icon-fonts como Fontello incluían desde el primer día una opción de descarga "base64 dentro del CSS". Lo que cambió con .woff2 fue el presupuesto de tamaño: al pesar un tercio que un .ttf, incrustar una fuente de cuerpo finalmente se volvió razonable en lugar de absurdo.