Propriedade @font-face CSS – Fonts externas na web

Tipografia na web sempre foi um sonho para todo designer. Alguns designers que trabalharam durante muito tempo com impressão se sentem presos com web por conta da limitação de escolha das fonts. A tipografia é parte importante na criação de peças gráficas e na web isso não poderia ser diferente. Mesmo assim, não havia uma maneira ‘inteligente’ de utilizar uma fonts que não seja padrão do sistema operacional do usuário na criação de layouts para web. Iniciativas comoTypeKite Sifr quebram o galho mas não são o ideal.

A regra do CSS chamada @font-face é uma das funcionalidades que foram mais aguardadas. Ela permite que você utilize famílias de fonts fora do padrão do sistema. Veja abaixo a sintaxe:

[sourcecode language=”css”]

@font-face{
font-family: helveticaneue;
src: url(‘HelveticaNeueLTStd-UltLt.otf’);
}

[/sourcecode]

Na primeira linha você define um nome para a font importada.
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:

[sourcecode language=”css”]

p{ font:36px helveticaneue, Arial, Tahoma, Sans-serif; }
[/sourcecode]

Suponhamos que você queira oferecer a font para os usuário que não a possuem instalada, mas para aqueles usuários que tem a font em seus sistema, o browser utiliza a cópia local do usuário:

[sourcecode language=”css”]

@font-face{
font-family: helveticaneue;
src: local(‘HelveticaNeueLTStd-UltLt.otf’),url(‘HelveticaNeueLTStd-UltLt.otf’);
}

[/sourcecode]

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

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam.

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

Veja um exemplo pronto.

Fonts pagas

O principal problema com na utilização de @font-face é que arquivo da font é disponibilizado no servidor, de forma que qualquer um tem acesso. Se você estiver utilizando uma font paga, com direitos de copyright, o download desta font pode ser ilegal e você que está disponibilizando pode ser responsabilizado. Há uma série 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. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.