Adicionando fontes externas em sites com CSS



Seu site tem aquela fonte bacana?? Mas voçê sabe se o usuário do seu site tem essa fonte instalada no pc?
Aqui está a solução dos seus problemas, e do usuário também!!

A propriedade @font-face permite que usemos famílias de fontes que não estão instaladas no computador do usuário.

O @font-face faz com que o browser baixe, instale e renderize uma font na página.
Nem preciso falar que isso pode deixar o site um pouco mais lerdo. Outro ponto é que nenhum dos browsers tem suporte para isso hoje.

Veja um exemplo de como usar essa técnica:

@font-face {
font-family: Nome da Fonte, Verdana, Arial, Tahoma, Sans-Serif;
src: url(enderecodafonte);
}
 Agora sim!! Coloque fontes sem moderação, lembrando que, cuidado com a fonte, pois pode não combinar com o seu layout em questão ok??

Siga o autor do blog no Twitter :
 
@junim_ramos

6 comentários:

  1. Bom dia gostaria de fazer um convite para o site www.ilogus.com.br de criação competitiva para designers e webdesigners, conheça um pouco desse trabalho.

    ResponderExcluir
  2. em que lugar do template se coloca esse cógigo?

    ResponderExcluir
  3. Você deve colocar o código no arquivo onde se encontram os estilos CSS do seu site Ex: ../scripts/estilos.css.

    ResponderExcluir
  4. .. Mas do que adianta isso se nenhum browser tem suporte?

    ResponderExcluir
  5. O @font-face fazia parte da especificação do CSS2 de 1998, mas como essa técnica não obteve muito uso, foi removida da especificação com o CSS2.1. No entanto, o Internet Explorer já havia adicionado o suporte ao @font-face na sua versão 4. Como a nova especificação para o CSS3 traz de volta o @font-face, praticamente todos as ultimas versões dos navegadores estão suportando esse recurso.

    ResponderExcluir
  6. E agora, como podemos fazer com que o usuário veja a fonte que nós queremos utilizar, sem que ele tenha no seu PC??

    ResponderExcluir