Base64 para fonte

Como decodificar uma fonte em Base64

1. Cole em Base64 ou data URI uma destas opções: Base64 puro, um data URI como data:font/woff2;base64,d09GMg… ou um CSS que contenha um. Com várias entradas src na mesma regra, é usado o primeiro data URI.
2. A prévia mostra a fonte com o pangrama “The quick brown fox jumps over the lazy dog 0123456789” e uma linha com o alfabeto completo. Digite em Texto de exemplo para testar as suas próprias palavras.
3. A lista de informações mostra o que o arquivo da fonte diz sobre si mesmo: Família da fonte, Estilo, Nome completo, Versão, Glifos e Unidades por em.
4. Clique em Baixar arquivo para salvar com a extensão do formato.

A linha de status abaixo das informações diz “Renderizado com a fonte decodificada.” quando o navegador aceitou a fonte. Ela é registrada com um nome privado só para esta página e removida de novo quando você decodifica outra coisa; a Content Security Policy da página não permite tráfego de rede além do contador de visitas da Cloudflare, então o arquivo não vai a lugar nenhum.

Formatos e o que a ferramenta lê de cada um

Para WOFF2, a linha de família diz “não lido (as tabelas WOFF2 são compactadas com Brotli)”: a página não descompacta Brotli por conta própria, e o motor de fontes do navegador, que descompacta, guarda o resultado para si. A renderização não é afetada, então você ainda vê se a fonte está com a aparência certa. Para ler os nomes depois de salvar, o fc-scan do fontconfig lida com WOFF2:

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

Para a fonte Material Icons, isso imprime Material Icons: Regular.

Quando a fonte não é renderizada

“Seu navegador rejeitou esta fonte. Ela pode estar danificada ou não ser uma fonte.” significa que o sanitizador de fontes do navegador recusou o arquivo. Chrome e Firefox verificam toda web font em busca de erros estruturais antes de usá-la, e uma fonte truncada, ou recortada de um arquivo maior no offset errado, não passa nessa verificação. Compare o tamanho decodificado com o original; uma string Base64 que perdeu o final decodifica para uma fonte com a última tabela quebrada.

Se a lista de informações mostra os nomes, mas o exemplo fica vazio, a fonte não tem glifos para o que você digitou. Isso acontece com:

• Fontes de ícones: os símbolos ficam em code points de uso privado, como U+E000 em diante. Fontes que usam ligaduras, entre elas a Material Icons, mostram um ícone quando você digita o nome dele, por exemplo home.
• Fontes com subset: páginas web muitas vezes embutem só os caracteres de que precisam, às vezes algumas dezenas. Glifos mostra quantos o arquivo contém.
• Fontes para outros sistemas de escrita: uma fonte feita para árabe ou devanágari pode não ter letras latinas.

Quando os dados nem são uma fonte, o aviso diz o que são: “Isto parece ser PDF, não uma fonte.” e assim por diante, com o botão de download correspondente.

De onde vêm as fontes em Base64

A maioria vem de CSS. Ferramentas de build embutem fontes pequenas nas folhas de estilo como URIs data:, e exportações de HTML em arquivo único, relatórios offline e arquivos SVG com texto levam as fontes do mesmo jeito. Embutir tem um custo, já que uma fonte embutida não pode ser guardada em cache separada da folha de estilo; desempenho de data URIs traz os detalhes. Para transformar um arquivo de fonte numa regra assim, use Fonte para Base64.

Extrair todas as fontes de uma folha de estilo em Python

A ferramenta decodifica o primeiro data URI que encontra. Para uma folha de estilo com várias fontes embutidas, um script curto salva todas com a extensão certa:

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")

A extensão vem dos quatro primeiros bytes porque as folhas de estilo muitas vezes rotulam as fontes de forma imprecisa (application/font-woff, application/octet-stream). Mais em Base64 em Python.

Perguntas frequentes