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, Έτσι, παραλείψτε αυτό το βήμα.

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. Στην περίπτωση αυτή, precisamos ter os vários tipos de formatos, tais como .ttf, .Εοτ, . 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.

Στο παρακάτω παράδειγμα, 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-στυλ: 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, στην περίπτωση αυτή, é 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 (διαδρομή) dentro de url(<caminhoParaFonte>), se necessário.

Λύση 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], “/” και “+”) 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, Κάντε κλικ στο κουμπί “CSS File”.

– http://base64fonts.com/

Inserir o código no CSS

Τέλος, 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 και 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, κάτι σαν:

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. Έτσι, 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

Γραμματοσειρές

– Fonts Tutorials – About Web fonts
– Wikipédia – Base64