@font-face – Fonts externas na web

Tipografia na web sempre foi um sonho para todo designer para web.

@fonface

@fonface

Alguns designers que trabalharam durante muito tempo com impressão estranham o tarbalhar com web por conta dessa limitação. 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 fonts externas na criação de layouts para web. Iniciativas como TypeKite Sifr  quebram o galho mas não são o ideal.

@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.

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. 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.

Fonte: Tableless

Anúncios

2 Comentários

Arquivado em CSS . Cascading Style Sheets, XHTML

2 Respostas para “@font-face – Fonts externas na web

  1. “Superhipermegaturbo útil!” estava quebrando a cebeça pra resolver exatamente isso, tenho que habituar a ler o blog antes de tomar café da manhã 🙂

    “Superhipermegaturbo útil!” I was a broken head to resolve this, I have to get use to read the blog prior to breackfast
    thanks:D

  2. Agradecemos a preferência…abraço..rs

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s