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

[RSS iMasters 5]

Acostumados com as possibilidades do meio impresso, muitos designers gráficos que migraram para a web sempre sofreram bastante com as limitações tipográficas, pois para usar uma determinada fonte em um site, era necessário que esta estivesse instalada no computador dos usuários. Esse fator restringia o designer ao uso de 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 substituí-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".

 

Porém, 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 últimas 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, para isso basta manter o arquivo da fonte disponível no servidor para que o navegador do usuário faça o download e utilize. Dessa forma é só 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 - apesar de ser gratuito, o site ainda possui poucas opções.

 

Você ainda 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/arquivo para nenhum navegador é o Font Squirrel.

 

Neste serviço 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?

 

Até a próxima e acompanhe mais conteúdo sobre design no meu Twitter!

 

 

 

http://imasters.com.br/artigo/20429/css/font-face-tipografia-sem-restricoes-na-web