Como usar fontes personalizadas baixadas da internet no blog? - * Blog Elaine Gaspareto *

Como usar fontes personalizadas baixadas da internet no blog?

em 12/06/2017

Como usar fontes personalizadas baixadas da internet no blog?

Tempos atrás eu publiquei um tutorial aqui no blog que ensinava como usar qualquer fonte baixada da internet no blog.
Recorde: Como usar qualquer fonte (baixada da internet) no blog?

Ele funcionava que era uma maravilha mas ano passado o site que gerava um dos códigos saiu do ar e aí o tutorial perdeu a validade.
Mantive o post no ar por questões de SEO mas fiquei devendo uma outra opção para usar no blog as fontes lindas que encontramos, baixamos mas que só podíamos usar em edição de imagens e não no blog em si, em títulos por exemplo.

Hoje vou mostrar como usar qualquer fonte que desejar no blog usando a propriedade @font-face.
Vamos lá?


Escolha a fonte mais linda e gere um kit com os formatos dessa fonte


Antes de mais nada você precisa encontrar a fonte que deseja usar, baixa-la em seu computador, descompactar o arquivo caso ele esteja zipado e salvar em uma pasta qualquer de sua preferência.
Caso já tenha a fonte em seu computador pule para o próximo passo.

A seguir você precisa gerar um kit com todos os formatos necessários da sua fonte escolhida.
Mas, Elaine, pra que precisa disso?
Simples, querido leitor!
Existem diversos navegadores e cada leitor de seu blog pode navegar usando o navegador que prefere: Firefox, Chrome, Explorer, Safari, Opera, etc...
Há quatro formatos de fonte: WOFF2, WOFF, EOT e TTF
E cada navegador suporta as fontes especiais em um formato.

Formatos de fonte e navegadores compatíveis:
Para Chrome: TTF e WOFF
Para Safari, Opera,Android e IOS: WOFF2
Para Internet Explorer (versão anterior ao Edge): EOT
Firefox: WOFF2, WOFF  e TTF

Então, para que a fonte linda que você escolheu seja exibida corretamente em todos os navegadores, dos mais antigos aos mais modernos, é preciso especificar no código todos os 4 formatos.
Esse é o motivo de precisarmos gerar o kit com todos os formatos da fonte antes de seguirmos.
Entendeu?
Então, sigamos.

Para gerar esse kit com todos os formatos da fonte acesse Webfont Generator do site Font Squirrel (que aliás tem centenas de fontes para baixar e usar!).
Veja na imagem abaixo como deve ficar:


1- Faça o upload da fonte que deseja;
2- Clique em Expert para selecionar os formatos;
3- Selecione os formatos conforme a imagem acima;
4- Marque a caixinha conforme indicado;
5- Clique no botão para baixar seu kit;

Assim que a fonte estiver pronta e você tiver clicado na caixinha como na minha imagem aparecerá um botão de download.
Clique nele e baixe seu kit. Será um arquivo compactado, precisa descompactar, ok?
Quando descompactar aparecerá na sua pasta um monte de coisas. Delete o que marquei na imagem pois não são necessários para nosso propósito.
Veja o meu exemplo, com a fonte Melancholight Regular que escolhi:



Mantenha apenas os 4 formatos da fonte.
Agora vamos hospedar cada formato da fonte pois precisamos do link desses formatos.


Como hospedar a fonte em seus 4 formatos para usar a @font-face?



Você pode usar o serviço de hospedagem que preferir; existem alguns pagos, outros com versões gratuitas.
Exemplo?
Dropbox. Ele é gratuito (tem upgrade pago se precisar de mais espaço) e é bem fácil de usar.
Mas tem um problema: se seu tráfego for intenso ele simplesmente bloqueia seus links. Já aconteceu muito comigo, de alguns scripts dos meus tutoriais saírem do ar por causa do tráfego alto...


O pulo do gato
Mas vou ensinar aqui um jeito bem 'maneiro' de hospedar esses arquivos que é usando o Tumblr.
Para fazer isso você precisa criar uma conta Tumblr.
Clique aqui e crie a sua conta Tumblr. Não leva nem um minuto. Confirme a criação da conta clicando no link que será enviado ao email cadastrado ao criar a conta.

Conta criada?
Clique aqui para acessar seu painel.
Na tela que abrir clique em Editar HTML.
A seguir clique engrenagem que aparece no alto da lateral esquerda. Assim:


No menu que expandir clique em Recursos do tema.
Aí clique em Adicionar um arquivo. Adicione, um a um, cada um dos 4 arquivos da fonte.
Espere carregar. Mantenha a página aberta.

Vá ao painel de seu blog e clique em Modelo. A seguir clique em Editar HTML e dentro da caixa do código-fonte de seu blog localize ]]></b:skin>
ACIMA dessa tag de fechamento cole este código:


Copiar os códigos


Agora volte ao Tumblr e copie o link de cada arquivo que você hospedou. Para fazer isso basta parar o mouse sobre o nome do arquivo e clicar com o botão direito do mouse. Selecione Copiar endereço do link (é assim se estiver no Chrome).
Agora, no código-fonte de seu blog, complete o código que forneci com os endereços dos arquivos hospedados.

Veja como fica com minha fonte de exemplo:

@font-face {
    font-family: 'melancholightregular';
    src: url('http://static.tumblr.com/dhipdgr/c2Vorcnty/melancholight-webfont.eot');
    src: url('http://static.tumblr.com/dhipdgr/c2Vorcnty/melancholight-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://static.tumblr.com/dhipdgr/vMRorcnu8/melancholight-webfont.woff2') format('woff2'),
         url('http://static.tumblr.com/dhipdgr/THForcnu4/melancholight-webfont.woff') format('woff'),
         url('http://static.tumblr.com/dhipdgr/4d4orcnu0/melancholight-webfont.ttf') format('truetype');
    }

A maior atenção é colar os endereços no local correto de cada formato, aí não tem erro, ok?
Veja o resultado em meu blog de exemplo:


Demonstração do tutorial


Como faço para usar a @fonte-face no blog?


Agora vem a parte final: usar a fonte instalada no blog.
Antes de mais nada defina onde quer usar a fonte; a seguir localize no seu código-fonte área que "comanda" o item que deseja mudar. Explico:
Vamos supor que você queira usar a fonte especial no título dos posts.
Localize então o comando que define os títulos dos posts.
Em geral é a tag h3.
Nos templates nativos do Blogger (Designer de Modelo) é assim a tag que define os títulos dos posts:
 h3.post-title {

Aí você verá, provavelmente, algo assim:

/* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px;
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  text-decoration: underline;
}

Para usar a fonte personalizada altere assim (lembrando que estou usando a minha fonte como exemplo):

/* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px;
font-family: 'melancholightregular';
    font-size: 58px;
text-align: center !important;
}

h3.post-title a {
font-family: 'melancholightregular';
    font-size: 58px;
  color: $(post.title.text.color);
text-align: center;
}

h3.post-title a:hover {
font-family: 'melancholightregular';
    font-size: 58px;
text-align: center;
  text-decoration: none;
color: $(link.color);
}


Se quiser trocar a fonte dos títulos dos gadgets da sidebar procure por:

 /* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}


E altere assim:

/* Headings
----------------------------------------------- */
h2 {
 font-family: 'melancholightregular';
font-size: 30px;
  color: $(widget.title.text.color);
}



Caso seu template seja baixado da internet tem que procurar basicamente isso: h3 para títulos dos posts e h2 para títulos dos gadgets.


Dicas extras importantes


1- Use as fontes especiais para títulos e destaques. Evite usar fontes assim para texto pois elas pesam mais que as fontes padrão e se forem cheias de detalhes dificultam a leitura.

2- Não apague os arquivos hospedados no Tumblr. Reserve esse template para hospedar arquivos. Mas não se preocupe, uma vez hospedados os links não somem da web.

3- Pode usar mais de uma fonte especial por blog? Sim, pode. Basta repetir o processo de escolher a fonte/gerar o kit/hospedar a fonte nos 4 formatos/inserir o código @font-face e definir onde usar.
Mas atenção!
Evite excessos pois pode comprometer o tempo de carregamento do blog.

4- Deixei todos os códigos, nativos e modificados, no meu blog de códigos. Consulte, use, enjoy! Mas não republique este tutorial em seu blog, ok?


Sim, o tutorial é longo, levei mais de 6 horas pra fazer. Mas é simples e bem fácil de executar, basta ler com atenção.
Então não desanime.
Leia, releia, em menos de 1 hora você faz tudo, vai por mim.

Gostou do tutorial?
Então me ajudaê, querido leitor! Curta, compartilhe, comente no post...
10 comentários via Blogger
comentários via Facebook

10 comentários:

  1. Esse tutorial é uma mão na roda! Já fazia um tempo que eu procurava e não conseguia encontrar. Obrigada pelo post! (:
    Encontrei um slide em um blog de testes seu, mas não consegui encontrar no blog o tutorial correspondente a ele. Você poderia me informar o link, caso já tenha sido postado? Ou talvez fazer um tutorial sobre ele futuramente?
    Segue o link: https://goo.gl/SsPkXy

    Agradeço desde já. ^-^

    ResponderExcluir
    Respostas
    1. Luana, não tem tutorial não mas vou fazer. Eu achei um erro no script e só recentemente consegui resolver.
      bjsss

      Excluir
  2. Parabéns pelo artigo. Recomendamos a todos a leitura.

    Nos apresentando, a Inove atua na área da Construção Civil, especializada em Pintura e Textura. Trabalhamos com: Pintura Predial, Pintura de Galpão, Pintura Comercial, Pintura Residencial, Reformas e Construções.

    Acesse e confira: http://www.reformasinove.com.br

    Será um prazer recebê-los em nosso site.

    ResponderExcluir
  3. Excelente artigo!!! É o único que funciona. Pela primeira vez, consegui.

    Mas e quando acontece das fontes pararem de ser visualizadas em determinado dispositivo? Foi o que aconteceu com meu notebook depois de 15 dias de carregamento perfeito das fontes. Parou de funcionar em todos os navegadores... Reparei que no celular e em outros computadores as fontes continuam aparecendo normalmente. Ou seja, não o tumblr está funcionando...
    Você teria alguma ideia?

    Obrigado!!

    ResponderExcluir
    Respostas
    1. Tiago, qual seu blog? E qual a versão do windows de seu notebook? Ou é outro sistema operacional? Tudo isso influi, e também ajuda limpar o cache para ter certeza que não é algo armazenado que está comprometendo a exibição. Se estava certo antes e de repente parou pode ser algo do próprio dispositivo, mas eu nunca vi...

      Excluir
    2. Olá! Utilizo o Windows 10. As fontes voltaram a aparecer depois que refiz o tutorial em "criar novo blog". Mas depois de um tempo, elas deixaram de funcionar novamente. É difícil identificar o que pode estar havendo. Não sei se o tumblr está cortando a função... Existe outro hospedador que pode substituí-lo (tirando o Dropbox que não deu certo)? Obrigado pela ajuda!

      Excluir
    3. Tiago, eu não testei outro host porque quase não uso fontes externas. Talvez o https://github.com/ funcione, mas não testei.

      Excluir
  4. Oie, Elaine! O tutorial é perfeito, mas no meu caso a dica do tumblr não funcionou D:
    Eu usava o tumblr pra poder hospedar arquivos de fontes e scripts, mas atualmente o bicho só anda aceitando arquivos de imagem. Aparece essa mensagem:
    "Desculpe, mas este sistema não aceita arquivos HTML. Para criar uma nova página no seu blog, vá até a ferramenta de Personalização de Temas aqui: www.tumblr.com/customize, e selecione "+Adicionar página" à esquerda na barra de navegação."
    Não sei se é só comigo ou se é geral. E fora que sou uma completa negação quando o assunto é dropbox, não consigo catar o link direto, o que pego nunca dá certo, logo não consigo fazer funcionar nem com reza e fico limitada ao google fonts. #cry
    Bjos e parabéns pelo post! Ótimo como sempre ♥

    ResponderExcluir
    Respostas
    1. Flavia, o Dropbox mudou muito, nem tem mais pasta pública. Mas vou ver se consigo criar um tutorial de como pegar os links lá...
      O Tumblr pra mim continua igual, mas vou checar se acontece com mais gente o que vc relata :)

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…



Visualizações

Contando...

Dias online
Postagens
comentários