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!