Um tempo atrás fiz um tutorial sobre fonte diferente com CSS e uma com o script Cufon. De lá pra cá os navegadores melhoraram bastante em relação a isso e então tenho dado preferência para o CSS. Mas existem alguns pontos importantes sobre usar fontes em sites e blogs que quero falar a respeito hoje.
Direitos autorais
Algo que muitos não sabem é que fontes funcionam como imagens.
Você precisa ter permissão pra usar uma fonte.
É raro acontecer de ter problemas por conta de fontes sem direitos autorais, mas pode acontecer, especialmente quando um site ou blog começa se destacar bastante. O autor da fonte x ou y pode acabar resolvendo ir atrás de você pedindo pra remover ela ou que você pague alguma coisa por estar usando-a.
O Fonsquirrel por exemplo, que tem uma opção para converter fontes para os formatos necessário pra usar no CSS, tem uma lista de fontes pagas mais usadas, que quando você tenta fazer a conversão dela, ele não deixa.
Fontes pagas
Uma vez uma cliente me perguntou se ela comprasse uma fonte em um site x, a fonte ia funcionar bem em todos os navegadores. Necessariamente não.
Fontes pagas apenas significa que você tem permissão pra usar a fonte, não quer dizer que ela ficará perfeita em todos os navegadores.
Mas nem todas as fontes que você compra permite que você use ela online no seu site. Você precisa saber como funciona a licença daquela fonte que quer usar, pra saber se é permitido usar online, ou só para uso pessoal no seu computador, ou só para impressão.. as licenças variam.
Muitos designers criam as fontes e cobram por elas. É uma forma de ganhar pelo trabalho que teve em criar tal fonte. Que não é trabalho fácil.
Então qual a diferença entre paga e free?
A diferença é que você está usando uma fonte que poucas pessoas usam. Seu site fica diferenciado nesse ponto, por ter uma fonte quase exclusiva.
Fontes free
Da mesma forma que nem todas as fontes pagas tem permissão para usar online no site ou blog, as fontes free também não.
Algumas fontes são free apenas para uso pessoal no seu computador. Outras são free pra qualquer uso.
É preciso saber mais sobre a licença da fonte que deseja usar, especialmente se você está fazendo isso para um cliente.
Navegadores
Quando está usando fontes para sites você tem o problema em que algumas ficam péssimas para leitura, mesmo que no Photoshop fique perfeita.
Não dá pra ter certeza se a fonte que quer vai ficar boa no navegador, precisa testar pra saber se vai dar certo ou não.
Algumas fontes ficam boas apenas em tamanho maiores, quando precisa reduzir ficam péssimas.
Outras ficam ótimas em um navegador e muito ruim em outro.
Eu recomendo usar uma fonte padrão para textos para que a leitura fique boa para todos. Já nos títulos e outros detalhes do blog, você fica livre para usar a que desejar.
Mesmo assim recomendo usar com moderação, pois quanto mais fontes diferentes se usa em um site, mais pesado ele fica para abrir.
Para cada fonte diferente em um site você precisa ter mais ou menos uns 4 arquivos diferentes, pois é um formato diferente pra cada navegador. Então são 4 arquivos a mais, para cada fonte, sendo carregados quando o site abre. Se você tem umas 3 fontes diferentes, serão 12 arquivos a mais.
Photoshop (ou outro editor)
Um erro de muitos designers é usar o negrito e itálico do Photoshop e não o da fonte.
Algumas fontes não são feitas pra usar negrito e itálico, mas no Photoshop o ícone do T “gordinho” e do I em itálico, faz com que praticamente todas as fontes fiquem em negrito ou itálico.
Quando você vai usar a tal fonte online, pode acontecer do negrito e itálico com CSS funcionar, mas não fica tão bom e muitas vezes nem funciona.
No Photoshop você precisa ter a fonte para o modo regular, negrito e itálico, especialmente se você está fazendo o layout de um site ou blog que permitirá o usuário editar o texto.
Se o trabalho é para impressão, ou uma imagem que está criando para inserir no post de um blog por exemplo, não precisa se preocupar com isso.
Se você está usando a fonte para texto em posts ou páginas, que poderão ser alterados depois pelo editor do WordPress por exemplo, o ideal é pegar uma fonte que realmente permita isso, pra funcionar corretamente quando for o caso.
No Photoshop, ao lado da onde tem o nome da fonte, tem a opção da versão dela em negrito e itálico.
Se não tiver a opção de negrito e itálico é porque essa fonte não permite isso, ou você não tem ela nessas versões.
Um outro detalhe importante quando está usando fontes para textos e títulos é se a fonte permite acentos e ç. Algumas fontes não tem e não é possível forçar ela fazer isso.
Na web quando a fonte não permite acento, ele usa uma fonte padrão naquela letra acentuada.
Então, qual fonte escolher?
Se você não quer se preocupar em ficar lendo sobre os direitos autoriais, o Google Fonts é a melhor opção.
Todas as fontes lá são Open Source e ele ainda disponibiliza o link para o CSS, pra você usar no seu site.
O Fonsquirrel tem algumas fontes já com Webfont Kit pra download, o que significa que você pode usar no seu site.
Agora, se você procura uma fonte diferenciada, que nem todo mundo usa, o ideal é comprar uma. Mas veja se a licença dela tem permissão para o que deseja.
A Adobe Typekit é uma das mais usadas. Eles tem um plano free inclusive, mas que é limitado a 1 website e com limite de visualizações (no máximo 25 mil pageviews por mês).
No Design Shack tem um post bem completo sobre licença para fontes, em inglês.
E se a fonte ficará boa ou não no seu site, é preciso testar. Eu tenho um html básico onde só troco a fonte e o tamanho dela pra testar se vai ficar bom ou não.
O legal do Google Fonts é que ele permite que você adicione um texto e escolha o tamanho da fonte pra ver como ficará, e pode fazer isso em navegadores diferentes. Já no Typetester você consegue fazer uma comparação entre fontes.