Sign up with your email address to be the first to know about new products, VIP offers, blog features & more.

#Comofaz: fonte diferente nos títulos do post

Não tem nada mais legal que ter um blog com nossa cara, né? Quanto mais ele for parecido com seu dono, melhor ainda! Eu, pelo menos, gosto de deixar um pouquinho de mim em cada detalhe do JDB. Nada no design do blog está lá em vão, sabem? Acho que, por menor que seja a mudança, ela reflete muito na “obra completa”.
É por isso que eu adoro trazer dicas de HTML e CSS para vocês. Quando comecei na blogosfera, os tutoriais eram bem limitados e eu tinha que me virar com o pouco que encontrava. E o pouco que aprendi e sei, eu gosto de passar para a frente para ajudar as blogueiras que querem mudar seus cantinhos mas não podem gastar em layouts ou simplesmente porque querem aprender e colocar a mão na massa.
Como muitas leitoras me perguntam como eu uso fontes diferentes nos títulos dos posts aqui no JDB, decidi compartilhar essa dica que, mesmo simples, faz toda a diferença! O legal é que o processo é bem simples e fácil, basta apenas fazer pouquíssimas alterações no código do blog. Juro!
  • Antes de tudo, faça uma cópia de segurança do seu layout. Para isso, vá em Modelo e, no lado superior direito, clique em Fazer backup/Restaurar. Depois é só clicar em Fazer download do modelo completo e esperar baixar.
  • Feito isso, entre no Google Fonts. Lá há uma variedade enorme de fontes diferentes e muito legais. É nesse site que pego todas as fontes que uso no código do JDB. Amo/sou Google Fonts <3
  • No site, você pode fazer busca por fontes e filtrar os resultados para encontrar o estilo de fonte que você quer. Depois de escolher sua favorita, clique no quadradinho de Quick-use.
  • Na página que abrir, você vai encontrar algumas informações sobre a fonte, como tempo que demora para carregar, os estilos que ela possui, etc. Porém, o que nos interessa está mais abaixo, que são os códigos que vão fazer a fonte funcionar no blog. Eles estão no item 3.

  • Copie esse código e abra o Blogger. Lá, vá até Modelo > Editar HTML. Cole essa linha abaixo da tag <head>.
  • DICA: Muita gente já me disse que viu esse tutorial em vários sites e blogs por aí, seguiu direitinho o passo-a-passo mas, na prática, não deu certo. Conto procês o segredo: para funcionar, essa linha precisa de uma alteração. Após o text/css’ você precisa colocar uma /, pois, sem ela, o código fica, digamos, “em aberto” e o Blogger não o reconhece. Vou fazer a alteração com a fonte que eu usei só para vocês verem a diferença, tá? 
Era assim:

<link href=’http://fonts.googleapis.com/css?family=Devonshire’ rel=’stylesheet’ type=’text/css’>


Fica assim:

<link href=’http://fonts.googleapis.com/css?family=Devonshire’ rel=’stylesheet’ type=’text/css’ />


Após fazer essa alteração na linha, tudo fica certinho! Vale lembrar que esse é o código da fonte que eu estou usando como exemplo. Você tem que fazer a alteração no código da que você for usar e não copiar e colar esse acima, tá?
Agora você precisa trocar o nome da fonte no código correspondente ao local que você quer usá-la. Vou ensinar a fazer isso no título do post, mas qualquer dúvida, podem perguntar pelos comentários que eu ajudo, viu?

  • No código, procure por .post h3 ou h3.post-title. Pode ser que o do seu blog seja diferente, mas geralmente é um desses dois. 
  • Você vai encontrar um código com mais ou menos esse formato:

h3.post-title {
font-family: Oswald;
color: #444444;
}

  • Voltando à página do Google Fonts, no item 4 você verá algo assim:
  • Copie o que está depois de font-family (no caso, o nome da fonte) e, de volta ao Blogger, faça a substituição. Usando o código anterior como exemplo, vai ficar assim:

h3.post-title {
font-family: ‘Devonshire’, cursive;
color: #444444;
}

DICA: confira se não tem dois ; na linha! Isso faz toda a diferença.
  • Visualize e veja se mudou algo. Caso contrário, procure por .post h3 a ou h3.post-title a e repita o passo anterior.

DICA: na página da fonte no Google Fonts há várias dicas ao lado dos itens. Vale a pena dar uma #olhadinha em caso de dúvidas.
Agora quero saber de vocês: curtiram o tutorial? Conseguiram? Comentem aí! Não esqueçam que, em caso de dúvidas, é só deixá-las nos comentários que respondo aqui mesmo. Ah, e também me contem o que vocês querem aprender nos próximos tutoriais. Quem sabe a sua dica não é o próximo post do JDB? 😉

Compartilhe o post

13 comentários
  • Beatriz de Brito
    Abril 28, 2017

    Deu certo, muito obg

  • Ingridy Grigório
    junho 15, 2016

    Muito obrigada, de todos esse post foi o único que realmente me ajudou. Obrigada, viu?

  • Flaviani dodoo
    Março 18, 2015

    oiii Liinda tudo bem ? Nao estou conseguindo mudar a fonte do titulo do POST , sera que vce poderia me ajudar

  • Tawani Cavalcanti
    novembro 26, 2014

    Foi uma mão na roda, eu tinha visto outros tutus e nenhum foi tão esclarecedor quanto o seu!!! Obrigada mesmo *-*

  • Aline Iankevicz
    Abril 3, 2014

    Vc me ajudou mttt

  • canto da estante
    novembro 28, 2013

    oi se podia me ajudar….

    Eu consigo fazer tudo ate a parte de achar o h3.post-title. que eu nao consigo achar… o que eu faco ?

  • Taciane Souza
    outubro 20, 2013

    Oi Julie tudo bem? eu amei a dica e era exatamente isso que estava procurando, pois já me matei de tentar fazer isso e nada acontecia como vc explicou existe diversos tutoriais como esse mais nenhum falava que tinha que coloca o tal traço "/", e outra meu blog utiliza o theme do difluir, que só da pra muda, cor, fonte em html, como não entendo nunca conseguir, e até cheguei a pergunta a pessoas que conseguiram mudar nesse mesmo tema, mas infelizmente são poucas blogueiras que disponibilizam seu conhecimento, fico triste com isso. Mas acabo de me anima, vou agora mesmo tenta fazer essa mudança ÓTIMA DICA VIU. ah gostaria de saber qual nome da fonte que muitas pessoas utilizam no tema difluir e até você também usa no blog "5 Motivos", se puder me dizer fico agradecida. Grande beijo Julie, ah dica de próximo post pode ser como muda a cor de letras no html rs essa é minha dúvida agora. bjoo
    Não esqueça de passa no meu blog.
    http://expressodataci.blogspot.com.br/

    • Julie Duarte
      outubro 29, 2013

      Oi, Taci!
      Que ótimo saber que te ajudei <3
      A fonte, se não me engano, já vem no layout… Não consigo nem ver o nome dela ç.ç

  • Jéssica Kampa
    outubro 19, 2013

    Amo essa sua vontade de ajudar a todos Julie ♥
    Eu queria saber qual é o modelo que você utiliza como base de seus layouts.

    • Julie Duarte
      outubro 29, 2013

      O modelo que eu uso eu mesma fiz, amr 🙁 Não foi do Blogger.
      Mas esses layouts free que coloquei no JDB são feitos com base no que eu uso aqui :3

  • Camila
    outubro 18, 2013

    Eu já aprendi esse tuto, bem simples e adoro ele 🙂

  • Palavras Aquecidas
    outubro 18, 2013

    Obrigada pela dica!! Como faz para diminuir a fonte dos seus templates? Pode me ajudar, por favor? =( Obrigada!

Deixe seu comentário!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *