CSS com Fontes personalizadas em Base64

Melhore a apresentação do seu site utilizando fontes personalizadas sem carregar qualquer arquivo externo (.ttf, .eot, . woff, .svg).

Apresentação

Sabemos que é possível carregar uma fonte qualquer utilizando a diretiva @font-face do CSS. Podemos fazer isto de duas formas:

1. Com arquivos – Anexando os arquivos de Fontes ao CSS;
2. Com Base64 – Embutindo a codificação da Fonte direto no CSS.

O primeiro passo comum a ambas modalidades é escolher a fonte de sua preferência. Caso você já tenha o arquivo da sua fonte preferida, então pule esta etapa.

Existem diversos sites onde você pode escolher e baixar arquivos de Fontes, dentre eles:

Font Squirrel
Google Fonts
DA Font
1001 Free Fonts
Net Fontes
F Fonts

Algumas fontes podem ser proprietárias (pagas). Escolha a sua fonte e baixe para o seu computador. Vamos às Soluções!

SOLUÇÃO 1 – com arquivos

Esta é a forma convencional. Neste caso, precisamos ter os vários tipos de formatos, tais como .ttf, .eot, . woff, .svg, para atender aos diferentes navegadores, já que cada um requer um formato específico para renderizar a fonte, veja:

Navegadores e formatos de Fontes compatíveis:
– Internet Explorer: EOT (e IE9 WOFF);
– Mozilla: OTF, TTF (e FF3.6+ WOFF);
– Safari e Opera: OTF, TTF, SVG (e Safari5.1+, Opera11.10+ WOFF);
– Chrome: TTF, SVG (e Chrome6.0+ WOFF);
– Navegadores Mobile: SVG.

No exemplo a seguir, note que para construir o CSS seria necessário ter o arquivo da fonte ‘okudaregular’ previamente convertido para todos os formatos, o que tornaria o processo mais trabalhoso.

CSS carregando diversos formatos de Fontes

1
2
3
4
5
6
7
8
9
10
11
 
@font-face {
    font-family: 'okudaregular';
    src: url('okuda-webfont.eot');
    src: url('okuda-webfont.eot?#iefix') format('embedded-opentype'),
         url('okuda-webfont.woff') format('woff'),
         url('okuda-webfont.ttf') format('truetype'),
         url('okuda-webfont.svg#okudaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Reunir todos estes formatos pode não ser uma tarefa trivial. Alguns sites ajudam nisto, inclusive com conversores online.

Quer um exemplo? Suponha que você queira a fonte Okuda e já tenha o arquivo de Fonte “Okuda.ttf”. Tente isto: acesse o WebFont Generator. Faça upload do arquivo e, na sequência, baixe o KIT que, neste caso, é um arquivo compactado “webfontkit-20130416-104252.zip”.

Note que dentro do Kit (.zip) temos vários arquivos, mas o que vai nos interessar são os arquivos de formatos de fontes como .eot, .svg, .ttf, .woff e o conteúdo de “stylesheet.css”, que é exatamente o código “@font-face” que mostrei acima.

Tudo o que você tem a fazer é colocar as fontes junto a sua aplicação e ajustar o caminho (path) dentro de url(<caminhoParaFonte>), se necessário.

Solução 2 – com Base64

Esta foi a forma que melhor me serviu, totalmente compatível com os principais navegadores e sem a necessidade de carregar inúmeros arquivos externos. Nesta solução a Fonte vai “embarcada” no código CSS. Uma vez que você já tenha escolhido a sua fonte preferida, é preciso apenas mais duas etapas:

1. Converter para Base64;
2. Inserir o código no CSS.

Converter para Base64

Base64 é um método de codificação de dados/MIME que se utiliza de 64 caracteres ([A-Za-z0-9], “/” e “+”) para transferência de conteúdo na Internet.

O que precisamos fazer é converter o arquivo de Fonte para a Base64 e embutir diretamente no CSS. Acesse o site abaixo, faça o upload da sua Fonte e clique em “Encode” para realizar a conversão. Para obter o código CSS com a Fonte já em Base64, clique em “CSS File”.

http://base64fonts.com/

Inserir o código no CSS

Finalmente, basta copiar o código gerado em Base64 e colar no seu arquivo CSS, algo como isto:

1
2
3
4
@font-face{
 font-family: "Playball";
 src: url(data:font/woff;base64,d09GRgABAAAAAE5cAA...AEjQA=) format('woff');
}

A partir de agora é só utilizar a Fonte “Playball” no seu arquivo .css, dentro da tag style ou inline (não recomendado), assim:

1
2
3
  <div style="font-family: Playball;">
    Meu texto com Fonte personalizada.
  </div>

Problemas

Para Solução 1 e 2, pode acontecer os respectivos problemas:

Problemas com a técnica “arquivos em anexo”
Se as fontes estiverem em domínios diferentes ao da sua aplicação, o Internet Explorer e o Firefox não irão renderizar a Fonte, por questões de segurança. Para resolver isto, o Font Squirrel sugere autorizar via arquivo .htaccess, algo como:

1
2
3
4
5
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Problemas com a técnica “Base64”
Ao que tudo indica, parece haver uma limitação do Internet Explorer em carregar alguns arquivos de Fontes. Não sei se por serem muito grandes ou algum Bug desconhecido. Portanto, caso sua fonte não seja renderizada, experimente usar outra similar. Ou tente ambas soluções (com arquivos e com Base64) e veja qual a mais compatível com sua Fonte e navegadores.

Testei o resultado nos seguintes navegadores:
– Google Chrome Versão 26.0.1410.64
– Firefox 19.0.2
– Internet Explorer 10.0.9200.16521

Fontes

Fonts Tutorials – About Web fonts
Wikipédia – Base64

Total de acessos: 20202

Um comentário sobre “CSS com Fontes personalizadas em Base64

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *