Fontes diferentes no blog com o @font-face

Sabe essas fontes lindas que encontramos por ai, baixamos e não sabemos onde usar? Pois então, que tal usar elas no seu blog? Isso mesmo! Nesse tutorial ensinarei como colocar fontes baixadas no seu blog, da maneira mais fácil que descobri.

 Nunca vi nenhum blog ensinando a colocar fontes da maneira que vou ensinar aqui, então peço que não copie este post. Plágio é crime!

Este tutorial pode parecer grande e complicado, sugiro que você leia tudo antes de reproduzir para não se perder. Sugiro também que você salve uma cópia do modelo do seu blog, caso algo dê errado.

1º- Após baixar a fonte desejada, você irá pegar o arquivo otf ou ttf dela e irá upar no Cufón
Mas Alexia, como pega o arquivo otf ou ttf? Simples! Se você já tiver a fonte instalada em seu computador vá em: Disco local (C:) > Windows > Fonts e pronto, ai está todas as fontes do seu computador.
Agora basta procurar pela fonte desejada e copiar o arquivo dela para área de trabalho ou qualquer outra pasta e em seguida upá-la no Cufón. (clique na imagem para ampliar )

 

Usei a fonte Rabusto como exemplo

2º- Quando você upar sua fonte no Cufón, configure ele da seguinte forma (Clique aqui para ver com zoom):

Clique em Let's do this!

Agora que um arquivo foi baixado em seu computador, vamos colocá-lo no Tumblr. Se você não tem uma conta, sugiro que crie pois ele é muito útil para hospedagem de coisas do blog.

Depois de logar na sua conta você vai ir neste link, clicar em editar HTML e em seguida na engrenagem no topo superior esquerdo e em recursos do tema.

 

Clique em adicionar um arquivo e procure o arquivo que baixamos do Cufón.

Com o botão direito do mouse clique em cima do arquivo que foi upado e clique em "copiar endereço do link"

Tá cansada? Já estamos acabando 😂 Aguenta firme ai.

Até aqui este tutorial é igual a qualquer outro, mas a partir daqui as pessoas começam a complicar tudo, fazendo com que o recurso fique muito limitado e difícil para as pessoas que não estão acostumada a mexer com códigos entender. Eu sou uma dessas pessoas, então resolvi facilitar minha vida e arrumar um jeito de conseguir colocar as fontes do jeito que eu queria e de uma maneira menos complicada.

Para isso eu usei um código, que é bem simples, prático e funcional.

1. Copie todo o código, vá no Modelo do seu blog, clique em "Editar HTML"
2. Clique em qualquer espaço dentro do código e em seguida em Ctrl + F e pesquise por ]]></b:skin>
3. Assim que encontrar cole o seguinte código ACIMA dele

@font-face {font-family: “NOME DA FONT”; src: url(‘LINK-DA-FONT.js’); format ('truetype');}

Agora é só substituir o que se pede e por fim salvar.
Lembram que eu usei a fonte Rabusto como exemplo? Então no meu caso ficaria assim:
NOME DA FONT- Nome da fonte que você escolheu, no meu caso é Rabusto
 LINK-DA-FONT.js-  Aqui você coloca o link que copiamos do Tumblr.

No meu caso ficaria assim:

@font-face {font-family: “Rabusto”; src: url(‘http://static.tumblr.com/gmcw9id/Ypmoesvor/rabusto_400.font.js’); format ('truetype');}

Como colocar a fonte onde eu quero?

Para colocar a fonte no local desejado você precisa apenas saber o nome do css desse local. Por exemplo, no título da postagem o nome é "h3.post-title" então você vai pesquisar por "h3.post-title" e colocar um "font-family:" com o nome da fonte.

Acabamos 🎉🎈 Ufa! 😂 É tudo bem simples, basta você ir tentando que por fim vai saber de cor.
Qualquer dúvida pergunte nos comentários. Se tiver ficado muito confuso posso pensar em fazer um vídeo.