Tipografia em web design: @font-face à prova de erros

11
2471

Já faz bastante tempo que o CSS oferece a facilidade da regra @font-face (desde o CSS2, em meados de 1998). O uso deste tipo de estilização para empregar fontes (caracteres) que o visitante do site não têm instaladas no computador, não foi, por muito tempo, comum para grande parte dos web designers, já que os navegadores não aceitavam formatos comuns como o True Type: era preciso criar um arquivo no formato EOT (Embedded Open Type), um tipo de compactação da Microsoft - o que não era tão simples de ser feito (também não era difícil, mas sem dúvida uma chateação).

Mas com a modernização dos navegadores, a facilidade de deixar de lado as EOT veio. Viva! Mas será que é bem assim, sair criando regras para usar fontes TTF e pronto? Hmmm, infelizmente não, pois sempre temos "certos" navegadores com características próprias e portanto, necessidades específicas. E para ter certeza de que sua página terá a aparência que você quer em qualquer navegador, incluindo dispositivos móveis, deve-se deixar isso bem claro na sua folha de estilos.

Para quem não conhece, com uma declaração simples como:

@font-face{
font-family: nomedafonte;
src: url (endereçodafonte/arquivodafonte.extensão);
}

...seria suficiente para usar a família "nomedafonte" em seu site, para exibir a fonte carregada do endereço dado. Ok, isso vai funcionar em alguns navegadores (como o Chrome e o Safari), mas apenas nas versões mais modernas, e dependendo do tipo de fonte usado. Internet Explorer abaixo do 9, versões anteriores do Firefox e Opera provavelmente não exibirão a fonte que você determinou, sendo indispensável blindar esse código contra as deficiências características dos navegadores.

Vamos ver então como fazer isso.

Em primeiro lugar, ao escolher sua fonte, tenha certeza de que ela é liberada para uso em internet. Muitas são licenciadas apenas para exibição no computador e impressão. Use fontes como as do Fontsquirrel (isso não é propaganda!), que oferece fontes gratuitas já com a finalidade de exibição online.

Como exemplo, usei a fonte Pacifico. Então, você terá em seu arquivo style.css (ou outra folha de estilo):

@font-face{
font-family: PacificoRegular;
src: url('Pacifico-webfont.eot');
}

E para usar a fonte, por exemplo, nas suas H1:

h1 {
font-family: PacificoRegular
}

Seria lindo se fosse só isso, mas claro, não é. Porque o Internet Explorer (eu já disse que odeio o IE?) vai tentar baixar a fonte e não vai exibi-la. Então a solução seria colocar uma declaração do tipo de arquivo. Assim:

@font-face{
font-family: PacificoRegular;
src: url('Pacifico-webfont.eot') format('opentype');
}

Ainda assim o IE dará erro, pois não entende o atributo format (dará como resposta uma página de erro 404). Algumas soluções são possíveis, entre elas, a mais indicada (aqui já com os formatos lidos por outros navegadores):

@font-face {
font-family: 'PacificoRegular';
src: url('Pacifico-webfont.eot');
src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'),
url('Pacifico-webfont.woff') format('woff'), url('Pacifico-webfont.ttf') format('truetype'), url('Pacifico-webfont.svg#PacificoRegular') format('svg');
}

O primeiro src vai indicar o caminho da fonte EOT, que será lida normalmente por versões mais modernas do Internet Explorer.

O segundo src indica o caminho da fonte EOT com um fix para versões anteriores do IE: note o ponto de interrogação após o url. Ele é IMPRESCINDÍVEL para que o IE abaixo do 9 não dê erro. Note que fontes EOT devem vir sempre no início da regra, seguida por demais formatos, como visto acima. Isso é totalmente necessário.

Na sequência, estão, separados por vírgulas, os demais urls para formatos diferentes. O WOFF (Web Open Font Format) será lido por versões modernas dos navegadores (este formato é uma versão comprimida dos formatos TTF e OTF, sendo carregada bem mais depressa que as demais). O velho TTF (True Type Font) é o seguinte, sendo lido por navegadores modernos como o Safari e o Android. O formato SVG (Scalable Vector Graphics) vai garantir que sua fonte apareça também em dispositivos móveis gerais.

Com essa escrita, nenhum navegador deve fazer graça para exibir sua fonte (a não ser que haja outra regra atravessando esta e causando algum problema, o que é muito difícil). Este é o padrão de CSS oferecido pelos kits de inserção de fonte do Fontsquirrel.

O mesmo exemplo de CSS com comentários:

@font-face {
font-family: 'PacificoRegular'; /* o nome usado na folha de estilos para usar a fonte, pode ser outro */
src: url('Pacifico-webfont.eot'); /* Para o IE 9 */
src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'), /*IE 8 e inferior */
url('Pacifico-webfont.woff') format('woff'), /* navegadores modernos */
url('Pacifico-webfont.ttf') format ('truetype'), /* Safari, Android */
url('Pacifico-webfont.svg#PacificoRegular') format('svg'); /* dispositivos móveis */
}

Nota: apesar do uso de @font-face ser mais fácil com as versões mais modernas de navegadores, algumas questões ainda merecem citação:

  • há ferramentas para quem não conseguir usar o método do @font-face, como o estoque de fontes para web do Google (Google Webfonts), ou o Cufón (recurso via Javascript com a mesma finalidade). Especialmente o Cufón requer atenção, já que vai usar outros recursos além da estilização, como Javascript e HTML5 (leia-se: fará um tipo de gambiarra), para conseguir exibir as fontes.
  • lembre-se que, quanto mais fontes seu blog ou site tiver que carregar, um pouco mais lento vai ficar. Portanto, não exagere se quiser mantê-lo bem leve.

Este texto usa a fonte Pacifico

Este usa a fonte Chunkfive

É isso. Dúvidas, comentem.

- Publicidade -

Receba atualizações do Tutoriart

É grátis, e você pode escolher entre receber só sugestões sobre arte, design gráfico, Photoshop, etc, ou só sobre WordPress, blogging, design web, snippets, etc. Ou tudo, se preferir!

Quero assinar...
Ao assinar, você concorda com os Termos de Privacidade.

11 COMENTÁRIOS

  1. To com uma duvida absurda. Nenhuma das fonts que estão disponiveis neste post que você fez, aparecem originalmente. É o mesmo tipo de font, com o tamanho diferente. 🙁 O font-face não tá pegando aqui! Só uma ou outra font aparece sendo ela mesma. Nenhum dos navegadores leem corretamente as fontes. O que eu faço?

    • Tinha um erro de caminho para a fonte Pacifico depois que troquei de tema meses atrás, corrigi. Continua não vendo os textos usando Pacifico e ChunkFive no final? Ou seu problema é com outro site?

  2. Muito bom, Daniel!
    Um ótimo post que valoriza aspectos fundamentais: informação tão útil e completa quanto possível, apresentada por uma didática excelente e uma escrita clara, de quem bem domina nosso hoje tão maltratado Português.
    Uma sorte encontrá-lo (e foi pelo Ask, não o Google).
    Parabéns e um abraço

  3. Não estou conseguindo usar o @font-face nas versões 7. 8. 9 do mozilla firefox
    podem me ajudar a solucionar esse mistério.

    nos outros navegadores rodam de boa só nessas versões ai está impacando

    • Testei aqui com Firefox 9 e está funcionando tudo certo, Alexandre, então reveja sua folha de estilos, se está atribuindo a classe ao identificador certo, se não tem outra classe sobrepondo a regra...
      Pode ser muita coisa, só examinando o código pra ter certeza.

  4. EXCELENTE post. Claro e didático.

    Já usava fontes em EOT e TTF, vou agregar todos os outros para evitar brechas. 🙂

DEIXE UMA RESPOSTA

Por favor, digite seu comentário!
Por favor, digite seu nome aqui