9 de dez. de 2012

Utilizando o @font-face


Bem galera quem nunca usou uma fonte diferente no site não sabe o quando é bacana sair do padrão, e para isso existe a regra do CSS chamada @font-face é uma das funcionalidades que permite que você utilize famílias de fonts fora do padrão do sistema.

@font-face{
src:url(Endereço da Fonte no Servidor);
font-family: "Fonte.ttf";
}

Na primeira linha, você inclue o endereço de onde a fonte se encontra. No exemplo abaixo eu usei a pasta fontes/ e nela você coloca a fonte.

Na segunda linha você define um nome para a font importada.

Exemplo:
@font-face{
src:url(../fontes/SciFly-Sans.ttf);
font-family: "scifly";
}

No exemplo acima eu utilizei a fonte SciFly a qual uso no meu portfólio. Quem Não tiver host para hospedar as fontes podem usar a biblioteca do google.

Acesse o Google Web Fonts: http://www.google.com/webfonts
  1. Escolha a fonte e cliquem em "Add Coletion"
  2. Logo depois clique me "Usar"
  3. Copie o Script da Fonte e insira dentro das <head> </head> 
    Logo depois basta usar a integração no CSS.
    font-family: 'Fonte';

    5 comentários:

    1. N intendi muito --..
      E para um blog ou um site para usar o host..
      ATT:Maycon R
      www.gtainsidebrasil.com

      ResponderExcluir
      Respostas
      1. é como eu falei você deve usar a biblioteca do google no link que passei, daí terá a opção de pegar o script, link stylo e etc. Que deverá por dentro das tags "head" ou na abertura ou no fechamento dela. E logo depois basta integrar no CSS "4. Integrate the fonts into your CSS" font-family: 'Milonga', cursive; Por exemplo se deseja por a fonte no titulo do menu você colocará font-family: 'Milonga', cursive; no .sidebar h2{}

        Excluir