[Resolvido] Alterando a font padrão de um site com Font Face

[RSS iMasters 5]

Recentemente apareceu aqui na minha empresa (movin? on) um projeto um tanto quanto interessante: o cliente queria que o texto do site tivesse uma fonte diferente das padrões. Foi então que vi a necessidade de usar o font-face, presente no CSS3.

Os sites que desenvolvemos utilizam o WordPress como base e, dessa forma, o conteúdo todo pode ser gerenciado pelo usuário, por isso não poderia usar a técnica de ImageReplacement.

Veja como é simples:

@font-face {

font-family: ?Nome-da-Fonte?;

src: url(?http://caminhodoseusite/pasta/fontes/Nome-da-Fonte.eot?); /* para IE */

src: local(?Nome-da-Fonte?), url(?http://caminhodoseusite/pasta/fontes/Nome-da-Fonte.ttf?);

}

Sabe ali onde eu coloquei "font-family: ?Nome-da-Fonte'"? Pois bem, é ela que usarei na declaração da minha font-family no elemento que desejo.

Para ilustrar melhor, veja este código:

p { font-family: ?Nome-da-Fonte?, Arial; }

Com a declaração acima, o sistema procurará a fonte ?Nome-da-Fonte? e se não achar colocará a fonte Arial.

Isso funciona em todos os browsers modernos, portanto você pode usar sem medo. O único detalhe é que o IE não reconhece o formato TTF e somente o EOT, por isso que precisei declarar daquele jeito lá em cima :)

Veja um exemplo do uso de font-face.

Espero que usem isso e aproveitem.

Até o próximo!

 

http://imasters.com.br/artigo/22190/css/alterando-a-font-padrao-de-um-site-com-font-face