O pulo do gato: @font-face

Designers sempre tiveram o sonho de poder usar vários tipos de tipografias na web e trabalharam muitas vezes na “gambiarra“, alinhando imagens aos backgrounds dos textos através de CSS, o que ainda é muito utilizado e validado pelo W3C. Mas já faz um tempo que podemos mudar isso, e usar texto comum nos sites com a tipografia escolhida.

Estou falando da regra do CSS chamada @font-face . Ela permite que você utilize famílias de fontes fora do padrão do sistema operacional.

Formatos

É importante utilizar várias extensões da fonte escolhida, pois cada navegador renderiza de uma maneira.

Os formatos de fontes aceitos pelos navegadores padrões são .ttf, .eot, .otf, .svg e .svgz. Veja abaixo:

• TTF: Arquivo Raw TrueType, criado para visualizações em tela.
• EOT Lite: EOTs é suportado apenas pelo Internet Explorer. O EOT é descompactado e tem o mesmo tamanho que o TTF.
• EOT Compressed: EOT comprimido com LZ. O tamanho dos arquivos são muitas vezes menor do que WOFF.
• WOFF: Cross-browser, formato de fonte única que usa compressão gzip. IE9+, FF3.6+, Chrome 5+.
• SVG: Formato XML exigido por dispositivos de iOS antes da versão 4.2.
• SVGZ: Versão comprimida do SVG.
• OTF: Foi concebido para ser o sucessor do formato TrueType e do formato PostScript Type 1. Pode ser utilizado em Mac OS, Windows e alguns sistemas Unix.

Para converter uma font, você pode utilizar a ferramenta do site Font Squirrel .

Google Web Fonts

Você pode utilizar o Google Web Fonts e obter uma font online no servidor do Google. Pode ser viável se o uso for pequeno e em palavras específicas do site.

Como usar o @font-face

Adicione a sintaxe abaixo na sua folha de estilos, alterando apenas o nome e endereço da font escolhida:

1
2
3
4

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

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

1

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

Um detalhe importante é que para utilizar a fonte, ela precisa ser gratuita ou caso seja paga, ter a devida autorização.

Leia mais sobre o @font-face:

• Maujor
• Tableless

Eliane Garone

Desenvolvimento Web | Front-End. Me siga no twitter - @ligarone