Publicado por: Paulo Fernandes | 10/set/2011

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

Galera, andei meio sumido, eu sei, mas é que as coisas mudam né, prioridades vão aparecendo e se sobrepondo.
Talvez alguns de vocês saibam que comecei a minha startup movin’ on, como foco em desenvolvimento de sites e sistemas.
Também desenvolvi um produto Lembre Disso – Solução em SMS.

Mas o que isso me importa, você deve se perguntar. Aqui vai a resposta:
Os sites que minha empresa desenvolve utilizam o WordPress como base para o desenvolvimento e dessa forma o conteúdo todo pode ser gerenciado pelo usuário.
Dessa forma o que você acha de colocar os links do menu do seu site com a fonte Arial??? Simples demais né? Pois bem, no CSS2 utilizavámos a técnica de ImageReplacement. Uma técnica muito útil para ser sincero. Porém como o desenvolvimento dos sites usam como base o WordPress complicaria um pouco usar esa técnica.
Porém com a chegada do CSS3 podemos fazer de uma forma muito mais simples com o @font-face.

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 essa 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 browser 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

 

 

Anúncios

Responses

  1. É necessário alterar também a extensão da fonte? de .ttf para .eot?
    Aqui essa dica não está funcionando de jeito nenhum.


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

Categorias

%d blogueiros gostam disto: