28 setembro 2015

Tecnologia: Fontes Diferentes no Blogger

Olá meninas, hoje eu vou trazer um tutorial também de um problema que enfrentei outro dia. Queria colocar aqui no blog uma fonte que não pertence ao Google Fonts e gente, foi um sufoco. O blogger/blogspot não permite que façamos o upload dos arquivos de fonte e também não aceita que a fonte seja hospedada em sites de terceiros. Então como conseguir instalar a fonte no seu blog? Hoje vou mostrar para você como fazer isso em seu blog.

1. Download da Fonte

Primeira coisa é fazer o download da fonte. Escolha a fonte desejada e clique no botão download. Lembre-se de observar se a fonte escolhida aceita caracteres especiais como: ç, á, ã, etc.

2. Conversão da Fonte

Para instalar a fonte no seu site, você precisa possuir o arquivo nas seguintes extensões: ttf, eot e woff. O site Font2Web faz essa conversão para você, basta fazer upload do arquivo e depois o download dos arquivos convertidos.


3. Envio da Fonte para o Google Drive

Agora que você já tem seus arquivos de fonte, faça o upload no seu Google drive. Crie uma pasta chamada fontes e coloque esses arquivos dentro desta. Altere a privacidade desta pasta.

4. Ajuste de Endereço

Agora que a sua pasta de fontes já esta pública, é necessário montar o endereço dela. O Google Drive vai gerar um link para você.


No link gerado, após a palavra id= está a id da sua pasta, você pegará este id e colocará no formato abaixo:

http://googledrive.com/host/ + ID + /nomedafonte.ttf

Exemplo:

https://drive.google.com/open?id=0B4VvzPif3BooUnIzeThIdHpwR1U
http://googledrive.com/host/0B4VvzPif3BooUnIzeThIdHpwR1U/nomedafonte.ttf

5. Declaração no CSS

Prontinho, agora é só declarar este arquivo de fonte em seu CSS conforme o exemplo abaixo. Para ter acesso ao CSS do seu blog é só ir em Modelo > Personalizar > Avançado > Adicionar CSS.

@font-face {
  font-family: "NomedaFonte";
  src: url("http://googledrive.com/host/seuID/NomedaFonte.eot") format("eot"),
  url("http://googledrive.com/host/seuID/NomedaFonte.woff") format("woff"),
  url("http://googledrive.com/host/seuID/NomedaFonte.ttf") format("truetype");
}

Tem alguma dúvida? No site CSS3 Generator esse código é gerado para você.

Espero que este tutorial ajude vocês. Qualquer dúvida só deixar nos comentários que qualquer coisa eu completo ele. Mil beijos!

5 comentários:

  1. nossa, bem bacana, eu entendo mt pouco de personalizar o meu blog e sempre acabo com os recursos basicos

    www.tofucolorido.com.br
    www.facebook.com/blogtofucolorido

    ResponderExcluir
  2. Eu sou muito pouco entendida nestas coisas! Adoro estes conselhos!

    http://adorosercomosou.blogspot.pt/

    ResponderExcluir
  3. Já andei fuçando sites e vendo essas coisas, menina mais morro de preguiça de começar... kkkk

    bjus!

    http://petalasdelicadas.blogspot.com.br/

    ResponderExcluir
  4. Ótima dica
    deixa o blog da gente bem mais com a nossa carinha né?
    Amei
    Kisses

    ResponderExcluir