Fuente a Base64

Cómo convertir una fuente a Base64

1. Suelta un archivo .woff2, .woff, .ttf u .otf en el recuadro, o elígelo con el selector de archivos.
2. Salida como ya está en CSS @font-face. Elige Data URI o Base64 simple si vas a escribir la regla tú.
3. Copiar salida y pégala en tu hoja de estilos.

Para un archivo llamado Inter-Bold.woff2 el resultado se ve así, con los datos acortados:

@font-face {
  font-family: "Inter-Bold";
  src: url("data:font/woff2;base64,d09GMgABAAAAA...") format("woff2");
  font-display: swap;
}

El nombre de font-family sale del nombre del archivo, sin la extensión y con los caracteres que no sean letras, dígitos, espacios, - y _ sustituidos por espacios. Cámbialo por el nombre de familia que usas en tu CSS y añade font-weight y font-style si incrustas varios estilos de una misma familia.

Pistas format() y tipos MIME

La pista format() permite al navegador saltarse, sin descargarlas, las fuentes que no puede usar. Con una sola fuente incrustada importa menos, pero una pista que el navegador no reconoce hace igualmente que la descarte. La herramienta deduce la pista del tipo MIME que informa el navegador, y algunos sistemas informan las fuentes con tipos poco habituales. Si un OTF sale con format("truetype"), cámbialo a opentype.

Un WOFF2 que envuelve una fuente TrueType empieza por d09GMgABAAA; uno que envuelve contornos CFF empieza por d09GMk9UVE8.

Mantén pequeñas las fuentes incrustadas

El Base64 ocupa un tercio más que el archivo de fuente y va dentro de un CSS que bloquea el renderizado. Una prueba con una fuente de iconos WOFF2 de 77.160 bytes produjo 102.880 caracteres de Base64, que hay que descargar por completo antes de que se dibuje nada en la página.

Para que incrustar merezca la pena:

• Usa WOFF2. Para la misma fuente es mucho más pequeño que TTF u OTF.
• Recorta la fuente (subsetting). Quitar los glifos que no necesitas, por ejemplo todos los sistemas de escritura salvo el latino, puede reducir una fuente grande en la mayor parte de su tamaño. Las herramientas de subsetting de fuentes lo hacen desde la línea de comandos.
• Incrusta solo un estilo. Una fuente de titulares o una fuente de iconos que se usa en la parte visible al cargar es buena candidata. El texto del cuerpo en cuatro grosores funciona mejor como archivos separados que el navegador puede guardar en caché.

Los documentos HTML autocontenidos y las exportaciones de canvas o SVG que deben llevar su propia fuente son los casos típicos en los que incrustarla es lo correcto.

Comprobar una fuente en Base64

Si el texto cae en una fuente por defecto, abre las herramientas para desarrolladores del navegador y busca errores de carga de fuentes; después comprueba que el data URI empieza por data:font/ y que la carga útil empieza por uno de los prefijos de arriba. Un archivo que empieza por PCFET0NUWVBF es una página HTML guardada con extensión de fuente. Base64 a fuente decodifica una cadena, muestra los glifos y guarda el archivo.

Preguntas frecuentes