Métodos de Font-Replacement

Estava lendo um post do Webdesign Tuts+ que fala sobre diferentes métodos que permitem usar fontes diferentes sem utilizar imagens e achei legal traduzir resumidamente algumas técnicas.

Apesar de todos os avanços feitos no campo do webdesign pelo HTML5 e o CSS3, a área de tipografia continuou praticamente estagnada e sem muitas novidades. A importância em se usar texto como texto e não como imagens não passa somente pela redução drástica de trabalho em algum redesign do site, esse tipo de ação afeta também SEO e acessibilidade. Portanto, como sempre é falado, é importante constuir um layout bonito sim, sem limitações, com um bom e usável design, mas que também atenda às necessidade técnicas. Alguns métodos de font-replacement são:

@font-face

Este primeiro método vem sendo o mais utilizado por mim e aparentemente o melhor. Ele consiste basicamente em hospedar uma fonte em algum servidor e através de um código simples em CSS indicar ao browser onde buscar aquela fonte para renderizar o elemento.

Prós

• A acessibilidade é mantida
• Suporte unicode
• font-style (css) suporte

Contras

• Algumas fontes podem ser pesadas para se baixar
• Não existe um formato comum de fonte em todos os browsers
• A distribuição não é permitida – significa que você não pode usar isto em templates ou temas.

Cufón

Este método renderiza as fontes em um servidor criando um VML (para IE) ou um Canvas de HTML5 para outros browsers.

Prós

• Bem suportado em diferentes browsers
• Habilidade para buscar o set de caracteres que você quer para otimizar o tamanho do arquivo
• A propriedade font-style se mantém ativa e inalterada em todos os browsers

Contras

• Texto não selecionável
• Performance prejudicada – melhor usar somente em títulos
• Estilos especiais (sublinhado, hover etc) demandam mais trabalho

Google Fonts

Este método consiste em colar um pequeno trecho de código do Google em seu HTML e usar as fontes em seu CSS. Simples assim.

Prós

• Licensas abertas, ou seja as fontes são grátis para usar
• As fontes são hospedadas pela google, ou seja, você provavelmente já tem em cache

Contras

• Apesar de ter um bom acervo de fontes, ainda acho que faltam diversos tipos de fontes úteis para um layout

 

Font Squirrel

Segundo o post este talvez seja o método mais usado atualmente. Para usar você deve baixar o font-kit da página e inserir em seu site através de um @font-face. Mas é importante ter atenção com as licensas de cada fonte, nem todas são usáveis em todas as situações.

Prós

• Usa @font-face, mas com uma implementação muito mais fácil
• Eles gerenciam todos os problemas com licensas
• Inclui diversos diferentes formatos, isso quer dizer, crossbrowser!
• Você pode gerar seu próprio font-kit, se eles não tiverem o seu

Contras

• Os mesmos do @font-face lá de cima, mas apesar de tudo, esta é uma grande solução

 

Outros métodos

O post ainda apresenta diversos outros métodos de font-replacement, eu recomendo que você vá ao site e leia sobre todos para descobrir qual melhor se encaixa em suas necessidades.

Neste post eu coloquei somente os que considero mais importantes e todas as imagens e prós e contras foram traduzidos do post citado acima, os direitos são deles.

fonte: The Web Designer’s Guide to Font Replacement Methods