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 comoTypeKitSifr quebram o galho mas não são o ideal.

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:


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

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:


p{ font:36px helveticaneue, Arial, Tahoma, Sans-serif; }

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:


@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 que está no servidor.

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

String Font Format Common extensions
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“truetype-aat” TrueType with Apple Advanced Typography extensions .ttf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

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.

wiliamluis

Comment (3)
Julio Alves
11 de julho de 2011

Show de bola a dica, valeu!

Responder
Ricardo Augusto Pinto
28 de julho de 2011

Muito legal, podemos usar isso para fazer um email marketing? Por exemplo o cara consegue ver essas fontes alterados no email dele?

Responder
wiliamluis
28 de julho de 2011

nunca fiz esse teste, e no caso serão poucos gerenciadores de email ou webmail que aceita CSS, caso tenha alguma dúvida sobre isso acesse esse link http://wiliamluis.wordpress.com/2011/06/01/o-que-voce-precisa-saber-para-criar-um-excelente-e-mail-marketing/, nesse post explica quais permite CSS

Responder

Deixe sua resposta