Fonte para Base64

Como converter uma fonte para Base64

1. Arraste um arquivo .woff2, .woff, .ttf ou .otf para a caixa, ou escolha-o no seletor de arquivos.
2. Saída como já vem em CSS @font-face. Escolha Data URI ou Base64 puro se você vai montar a regra por conta própria.
3. Clique em Copiar saída e cole na sua folha de estilos.

Para um arquivo chamado Inter-Bold.woff2, o resultado fica assim, com os dados encurtados:

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

O nome em font-family vem do nome do arquivo, sem a extensão e com os caracteres que não são letras, dígitos, espaços, - e _ trocados por espaços. Renomeie para o nome de família que você usa no CSS e adicione font-weight e font-style se embutir vários estilos da mesma família.

Valores de format() e MIME types

O format() permite que o navegador pule, sem baixar, as fontes que não consegue usar. Com uma única fonte embutida isso importa menos, mas um valor que o navegador não reconhece ainda faz com que ele ignore essa fonte. A ferramenta deduz o valor pelo MIME type que o navegador informa, e alguns sistemas informam tipos incomuns para fontes. Se um OTF sair com format("truetype"), troque para opentype.

Um WOFF2 que envolve uma fonte TrueType começa com d09GMgABAAA; um que envolve contornos CFF começa com d09GMk9UVE8.

Mantenha as fontes embutidas pequenas

O Base64 é um terço maior que o arquivo da fonte e fica dentro de um CSS que bloqueia a renderização. Um teste com uma fonte de ícones de 77.160 bytes em WOFF2 gerou 102.880 caracteres de Base64, e tudo isso precisa ser baixado antes que qualquer coisa apareça na página.

Para que embutir valha a pena:

• Use WOFF2. Para a mesma fonte, ele é bem menor que TTF ou OTF.
• Faça subset da fonte. Remover os glifos que você não usa, por exemplo todas as escritas exceto a latina, pode cortar a maior parte do tamanho de uma fonte grande. Ferramentas de subset fazem isso pela linha de comando.
• Embuta só uma variação. Uma fonte de títulos ou de ícones usada na primeira dobra é uma boa candidata. Texto corrido em quatro pesos fica melhor como arquivos separados que o navegador pode guardar em cache.

Documentos HTML autossuficientes e exportações de canvas ou SVG que precisam levar a própria fonte são os casos típicos em que embutir a fonte é a decisão certa.

Verificar uma fonte em Base64

Se o texto cair numa fonte padrão, abra as ferramentas de desenvolvedor do navegador e procure erros de carregamento de fonte; depois confira se o data URI começa com data:font/ e se o conteúdo começa com um dos prefixos acima. Um arquivo que começa com PCFET0NUWVBF é uma página HTML salva com extensão de fonte. O Base64 para Fonte decodifica uma string, mostra a prévia dos glifos e salva o arquivo.

Perguntas frequentes