Campo de busca

Categoria Front-End

CSS
O pulo do gato: @font-face

O pulo do gato: @font-face

Por | 13 de julho, 2011 | 0 comentários

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 Fonts

Você pode utilizar o Google 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:

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

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

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:

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[0] Comentários  

Nenhum comentário em "O pulo do gato: @font-face". Seja o primeiro a comentar!