Base64 a fuente

Cómo decodificar una fuente en Base64

1. Pega en Base64 o data URI una de estas opciones: Base64 sin más, una data URI como data:font/woff2;base64,d09GMg… o un CSS que contenga una. Si una regla tiene varias entradas src, se usa la primera data URI.
2. La vista previa muestra la fuente con el pangrama «The quick brown fox jumps over the lazy dog 0123456789» y una línea con el alfabeto completo. Escribe en Texto de ejemplo para probar tus propias palabras.
3. La lista de información muestra lo que el archivo de fuente dice de sí mismo: Familia tipográfica, Estilo, Nombre completo, Versión, Glifos y Unidades por em.
4. Pulsa Descargar archivo para guardarla con la extensión de su formato.

La línea de estado bajo la información dice «Renderizado con la fuente decodificada.» cuando el navegador la ha aceptado. La fuente se registra con un nombre privado solo para esta página y se elimina cuando decodificas otra cosa; la Content Security Policy de la página no permite más tráfico de red que el del contador de visitas de Cloudflare, así que el archivo no va a ninguna parte.

Formatos y qué lee la herramienta de cada uno

En WOFF2, la fila de familia dice «no leído (las tablas WOFF2 están comprimidas con Brotli)»: la página no descomprime Brotli por sí misma, y el motor de fuentes del navegador, que sí lo hace, se guarda el resultado. El renderizado no se ve afectado, así que puedes comprobar igualmente si la fuente se ve bien. Para leer los nombres después de guardarla, fc-scan de fontconfig admite WOFF2:

fc-scan --format "%{family}: %{style}\n" font.woff2

Con la fuente Material Icons imprime Material Icons: Regular.

Cuando la fuente no se renderiza

«Tu navegador rechazó esta fuente. Puede estar dañada o no ser una fuente.» significa que el validador de fuentes del navegador rechazó el archivo. Chrome y Firefox comprueban que cada fuente web no tenga errores estructurales antes de usarla, y una fuente truncada, o recortada de un archivo mayor en un desplazamiento equivocado, no pasa esa comprobación. Compara el tamaño decodificado con el original; una cadena Base64 que perdió el final se decodifica en una fuente con la última tabla rota.

Si la lista de información muestra los nombres pero el ejemplo sigue vacío, la fuente no tiene glifos para lo que escribiste. Pasa con:

• Fuentes de iconos: sus símbolos están en puntos de código de uso privado como U+E000 y siguientes. Las fuentes que usan ligaduras, entre ellas Material Icons, muestran un icono al escribir su nombre, por ejemplo home.
• Fuentes recortadas: las páginas web suelen incrustar solo los caracteres que necesitan, a veces unas pocas decenas. Glifos muestra cuántos contiene el archivo.
• Fuentes para otros sistemas de escritura: una fuente hecha para árabe o devanagari puede no tener letras latinas.

Cuando los datos no son una fuente, la nota dice qué son: «Esto parece PDF, no fuente.» y similares, con el botón de descarga correspondiente.

De dónde salen las fuentes en Base64

La mayoría salen del CSS. Las herramientas de build incrustan las fuentes pequeñas en las hojas de estilo como URI data:, y las exportaciones HTML de un solo archivo, los informes offline y los SVG con texto llevan sus fuentes del mismo modo. Incrustar tiene un coste, porque una fuente incrustada no se puede cachear por separado de la hoja de estilo; rendimiento de las data URI da los detalles. Para convertir un archivo de fuente en una regla así, usa Fuente a Base64.

Extraer todas las fuentes de una hoja de estilo con Python

La herramienta decodifica la primera data URI que encuentra. Para una hoja de estilo con varias fuentes incrustadas, un script corto las guarda todas con la extensión correcta:

import base64, re

SIGNATURES = {b"wOF2": "woff2", b"wOFF": "woff", b"OTTO": "otf", b"\x00\x01\x00\x00": "ttf", b"ttcf": "ttc"}

css = open("icons.css").read()
pattern = r"data:[^;,]*(?:;[^;,]*)*;base64,([A-Za-z0-9+/=\s]+)"
for i, b64 in enumerate(re.findall(pattern, css)):
    data = base64.b64decode(b64)
    ext = SIGNATURES.get(data[:4], "bin")
    with open(f"font-{i}.{ext}", "wb") as f:
        f.write(data)
    print(f"font-{i}.{ext}", len(data), "bytes")

La extensión sale de los cuatro primeros bytes porque las hojas de estilo suelen etiquetar las fuentes sin mucho rigor (application/font-woff, application/octet-stream). Más en Base64 en Python.

Preguntas frecuentes