Tag: Aula HTML - Font-Faces

Hola pessoal!
Segunda postagem do dia, certo? Ou seja, não tenha absolutamente nada para introduzir. Apenas um monte de coisa que tenho que escrever para fazer o primeiro parágrafo. Como estão indo suas aulas. As minhas estão até legais, porque continuaram todos os professores do ano passado. Menos o de geografia, que era chatão. A professora nova é legal.

Ok, primeiro parágrafo completo. Estamos aqui hoje para iniciar a nova tag: Aula HTML. Muitas coisas não são complicadas de entender, você apenas tem que prestar atenção. Vamos começar com uma coisa fácil: como criar font-faces, o que creio que todos conheçam (se não conhecerem vão entender depois) e como colocá-las no blog. Então... Let's go.


O que são font-faces?

Simples: como devem ter percebido, uso uma fonte (Zebra) que não está no blogger em si. Uso um font-face, ou seja, o link de uma fonte junto com o nome dela. Que no caso é o seguinte:
@font-face {font-family: "Zebra"; src: url('http://static.tumblr.com/ejm8w78/vsylviai8/zebra_01-49-58.ttf'); }
Deu pra entender? Se não, continue lendo. O Blogger, tem fontes muito limitadas, por isso, na maioria das vezes, usamos font-faces. 

Como criar e colocar no blog?

Toda vez que baixa uma fonte, seja por qualquer site, quando você abre o arquivo, temos uma pasta em .ttf, que é o que precismos. Hospede essa pasta aqui. Para isso, você precisa ter uma conta no tumblr. Você deve coloar o link da fonte que apareceu onde indica. 
@font-face {font-family: "nomedafonte"; src: url('link da fonte');}
O nome não precisa ser o nome real da fonte, mas você vai precisar colocá-lo no lugar dos nomes das fontes. Exemplo:
@font-face {font-family: "Zebra"; src: url('http://static.tumblr.com/ejm8w78/vsylviai8/zebra_01-49-58.ttf');}
.sidebar h2 {
font-family: Zebra;
font-size: 20px;
color: #666;
}

Font-faces prontos

Se não conseguiu hospedar por algum motivo, aqui estão alguns prontos:

@font-face { font-family: "bebas neue"; src: url('http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf'); }
@font-face { font-family: "stars"; src: url('http://static.tumblr.com/hcfbjje/sfRlpm8t0/starsfromoureyes.ttf'); }

@font-face { font-family: "sweetiepie"; src: url('http://static.tumblr.com/4yxykdm/h9hlrfl0t/sweetie_pie_1_.ttf'); }
 Flowers in Falls
@font-face {font-family: "Zebra"; src: url('http://static.tumblr.com/ejm8w78/vsylviai8/zebra_01-49-58.ttf'); }
Espero que tenham gostado. Beijos! 

4 comentários:

  1. Amei, baixando aqui :3

    http://worldofgirl-official.blogspot.com.br/

    ResponderExcluir
  2. Otimo psot, nao sou muito boa com html e aprendi muito :3

    -World of dreams

    ResponderExcluir
    Respostas
    1. Que bom, tentei explixar da melhor maneira! o3o

      Excluir