@font-face: tipografia sem restrições na web

Muitos designers gráficos que migraram para a web, acostumados com as possibilidades do meio impresso, sempre sofreram horrores com as limitações tipográficas, pois para usar uma determinada fonte em um site, precisávamos que ela estivesse instalada no computador dos usuários, o que nos restringia a um pequeno número de fontes padrões nos sistemas operacionais.

A primeira solução para isso foi adicionar o texto com uma tipografia diferenciada em imagens, entretanto trocar textos por imagens não é muito bom para a acessibilidade nem para a semântica do documento. Entraram então as técnicas de CSS Sprite, onde poderíamos manter o texto normalmente no HTML e substitui-lo pela imagem através de CSS. Isso até que funcionava bem em sites estáticos, mas hoje eles quase já não existem mais, e utilizar essas técnicas em sites de conteúdo dinâmico é inviável.

Outras soluções surgiram, como o sIFR, que usa javascript e um arquivo SWF com a fonte embutida, substituindo os textos do site pela tipografia desejada. Dessa forma poderíamos usar qualquer fonte em nosso site de forma acessível, com os textos se mantendo “selecionáveis”. Porem, além dessa solução utilizar um arquivo do Flash, fechado e proprietário, ainda embute um arquivo javascript apenas para essa função. Assim também é com o uso do Cufón, que utiliza a tag <canvas> do HTML5 para desenhar a fonte desejada na página, mas além de embutir arquivos javascript para isso, o texto não fica “selecionável”.

@font-face: um velho amigo esquecido está de volta

O @font-face fazia parte da especificação do CSS2 de 1998, mas como essa técnica não obteve muito uso, foi removida da especificação com o CSS2.1. No entanto, o Internet Explorer já havia adicionado o suporte ao @font-face na sua versão 4. Como a nova especificação para o CSS3 traz de volta o @font-face, praticamente todos as ultimas versões dos navegadores estão suportando esse recurso.

O @font-face permite que você utilize fontes que não estão instaladas no computador do usuário, bastando para isso manter o arquivo da fonte disponível no servidor, para que o navegador do usuário faça o download e utilize. Dessa forma basta especificarmos no CSS o nome e o caminho do arquivo da fonte. Não necessita de nenhum outro recurso como o javascript.

Utilizando o @font-face

Alguns sites como o Typekit e o Font Deck disponibilizam esse serviço de forma paga, hospedando uma grande variedade de fontes. O Google também lançou o seu próprio serviço de Web Fonts gratuito, mas que ainda possui poucas opções. Mas você pode utilizar esse recurso sem depender de nenhum serviço para isso, basta possuir o arquivo da fonte desejada e disponibilizá-la no seu servidor de hospedagem. Um bom site para buscar fontes gratuitamente é o daFont.

Nem sempre diferentes navegadores costumam suportar um mesmo formato de arquivo de fonte, como você pode conferir no Webfonts.info. Um serviço que pode ajudar o seu site a não ficar devendo nenhum formato de arquivo para nenhum navegador é o Font Squirrel, onde você pode fazer upload de um arquivo como o True Type (TTF), para que sejam gerados os demais arquivos de fontes que você precisa, como o Embedded OpenType (EOT), Web Open Font Format (WOFF) e SVG. Ao baixar o pacote com as fontes geradas, também acompanham arquivos HTML e CSS com uma versão demo da implementação. Abaixo temos um exemplo do código CSS gerado pelo Font Squirrel:

@font-face {
font-family: 'nome-da-fonte';
src: url('nome-da-fonte-webfont.eot');
src: url('nome-da-fonte-webfont.eot?#iefix') format('eot'),
url('nome-da-fonte-webfont.woff') format('woff'),
url('nome-da-fonte-webfont.ttf') format('truetype'),
url('nome-da-fonte-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
body{
font-family: 'nome-da-fonte';
}


No mundo mobile, segundo a Revista W, neste ano a Apple informou sobre melhorias do iOS em bugs na renderização de web fonts e no suporte a fontes True Type pelo Safari. Melhorias similares também foram feitas no Android.

Definitivamente, não existem mais motivos para não incrementarmos a tipografia dos nossos projetos. E você, ainda vai ficar usando arial e verdana nos seus sites?