CSS3 | Usando fonts externas

Tipografia web sempre foi difícil de lidar, vários aspectos eram levados em consideração. Mas o sonho de todos que trabalham com web virou realidade. Agora é possível sim utilizar uma fonte externa, mesmo o usuário não tendo aquela fonte, ele irá visualizá-la.

O texto abaixo é originalmente do tableless.com.br.

@font-face é uma das funcionalidades mais esperadas do CSS. Ela permite que você utilize famílias de fonts em websites sem que o usuário tenha a font instalada no sistema. Veja abaixo a sintaxe:

@font-face {
  font-family: helveticaneue;
  src: url('HelveticaNeueLTStd-UltLt.otf');
}
Na primeira linha você dá um nome para a Font que você está  importando. Pode
ser qualquer nome.

Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}
Fiz alguns testes aqui e em algumas máquinas e conexões lerdas, o
browser carrega primeiramente o texto com a font padrão do sistema e
logo depois monta o texto com as fonts corretas. Nada de outro mundo
para quem utiliza imagens para substituir textos. Mesmo assim, pode ser
um incomodo para alguns.
Suponhamos que você queira oferecer a font para os que não a tem
disponivel no sistema, mas para que o site carregue mais rápido, queira
utilizar a cópia local do sistema do usuário caso ele a tenha instalado:
@font-face {
  font-family: helveticaneue;
  src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da font que está no servidor.

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam. Entretando, se você pratica Gracefull Degradation, vai achar uma maravilha.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT.
Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.
Você pode converter suas fonts para EOT diretamente no Font Squirrel.

É sempre bom você não abusar. Uma porque o design não fica bonito se você utilizar muitas fonts diferentes. Outra que o site pode ficar carregado. Lembre-se que o browser carrega o arquivo da font para só assim aplicar no layout.

Veja um exemplo pronto.

Fonts pagas

O principal problema com o @font-face o download de font ilegal. Há uma pancada de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.