01/05/2013

Usando fontes diferentes com @Font-Face


Oi gente hoje venho falar sobre uma coisinha chamada font-face, ela é super útil e pode ajudar muito os blogueiros de muitas formas. Ela é um tipo de substituto do google web fontes, essa palavrinha da possibilidade de usar fontes que você tenha baixado ou tenha em seu computador que não possua no Google Fontes, que é bem legal, porque pode usar fontes diferentes do padrão. Para isso existe a regra do CSS chamada @font-face que permite que você utilize fonts fora do padrão do sistema. E hoje vou mostrar como usa-lo é bem fácil, pode aplicar em qualquer parte de seus códigos como sidebar, area de postagens, menus etc.

Para usar a fonte você precisa hospeda la não é difícil, eu recomendo o tumblr ou o google biblioteca, separe a fonte que deseja usar os arquivos de fonte terminam em .ttf e são aqueles que você usa para instalar. Depois de hospedar pegue o link direto da sua fonte, e arrume como irei mostrar abaixo:


Códigos
@font-face{
src:url(link da fonte);
font-family: "link da fonte.ttf";
}

Também possui desta forma não tem muita diferença, mas veja qual funciona melhor em seu modelo:

Códigos
@font-face {
font-family: "nomedafonte.ttf";
src: url('link da fonte');
}

Quando adicionar esse código com ele recomendo colocar acima de ]]></b:skin>, vai ser o nome da fonte que você substituiu que irá entrar no lugar tipo sidebar.

Códigos
@font-face {font-family: "NOME DA FONTE"; src: url('LINK HOSPEDADO.ttf');}
.sidebar h2 {
font-family: NOME DA FONTE;
color: #000;
font-size: 13px;
text-align: center;
}

Deu para entender mais ou menos? Em vermelho é o local qual entrara a fonte, a parte em azul é o código do @font-face, e abaixo do vermelho e a personalização da sidebar. Mas isso é apenas um exemplo você pode adicionar em qualquer lugar que desejar. Bem, este é o tutorial de hoje espero que tenham gostado e entendido caso ainda tenham duvidas podem perguntar pelos comentários eu irei ajudar a todos, beijinhos e ate a próxima.

Créditos: Up Tutoriais

4 comentários:

  1. Ótimo o tutorial, flor! É até melhor pra escolher as fontes. As vezes temos uma fonte baixada no pc e não achamos outra igual online, assim fica mais fácil.
    Tem um selinho pra você lá meu blog, flor.
    Beijoos!
    http://sensatasonhadora.blogspot.com.br/2013/05/selinhos.html?showComment=1367450139168#c8021967508182510566

    ResponderExcluir
    Respostas
    1. Você tem toda razão, irei responder sim

      Excluir
  2. Amei tbm este tuto, estava precisando dele *o*

    ResponderExcluir
  3. Hihi fico feliz em ajudar

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345