Como usar Fontes Diferentes em seu Blog do Blogger

Como podemos ver, o blogger 2010 já possui nos seus templates mais opções de fontes além das tradicionais. Ótimo! Já estávamos cansados das mesmas: Arial, Trebuchet, Verdana,Times New Roman (Essa pra mim é a pior!).
Mas muitos usuários do blogger não usam os templates atuais e muitos dos templates customizados não possuem a opção de colocar fontes diferentes.

Vocês não imaginam o quanto fiquei feliz de aprender, alguns dias atrás, a alterar as fontes dos meus blogs e poder usar fontes "cutes". Acho lindo!

Claro que informação boa e útil não deve ficar exclusiva né. Então para quem ainda não sabe alterar as fontes do seu blog aqui vai o tutorial:

1º Escolha a fonte para o seu blog: 

Acesse o site: Google Web Fonts
» Escolha a fonte que mais lhe agradar.
» Neste caso eu escolhi a fonte Oregano representada pelo comando: font-family: 'Oregano', cursive;
» Se você estiver visualizando as fontes por palavras clique na setinha indicada na imagem abaixo▼


» Se você estiver visualizando as fontes por sentenças clique na setinha ao lado de Quick-use indicada na imagem abaixo▼

2º Colocando a fonte no HTML do seu Template:

» Role a página até a opção 3;
» Selecione o código da fonte ▼. Copie.


» Cole acima da tag <head> do seu template.
Para isso vá em: → Modelo → Editar HTML

ATENÇÃO

» Assim que colar a linha do código da fonte no seu template você deve fazer uma alteração IMPORTANTE.
Este é o código que você copiou no Google Web Fonts.▼
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
» No final da linha acrescente uma barra → / . Ficando assim:▼
<link href='http://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'/>

3º Como usar a fonte:

» Volte no Google Web Fonts e na opção 4 está o comando para integrar sua fonte no código CSS do seu template.

♦ Para mudar a fonte do título dos posts:
» Vá em Editar HTML procure por: (Use Ctrl+F)
.post h3 {
» Se você usa os novos modelos do blogger procure:
h3.post-title {
» Ou também você pode encontrar a linha:
.post-title {

» Adicione a linha abaixo na frente da chave {
font-family: 'Oregano', cursive;
Ficando assim:
.post h3 {font-family: 'Oregano', cursive;
outros comandos do título dos oists e fecha a chave }

» Acrescente a linha da font-family aos comandos do título dos posts.

Se aparecer mais de um h3.post-title ou .post h3 acrescente a linha da font-family em cada um deles. Faça o mesmo para os outros títulos.

♦ Para mudar a fonte do título do blog:
Repita o mesmo procedimento descrito acima, porém encontre a linha do comando do título do blog que é:
#header h1 {font-family: 'Oregano', cursive;
Outros comandos... fecha chave}

♦ Para mudar a fonte do título das gadgets (sidebars):
.sidebar h2 {font-family: 'Oregano', cursive;
Outros comandos... fecha chave}

♦ Você também pode mudar a fonte do blog todo colocando a font-family no comando:
body {font-family: 'Oregano', cursive;
Outros comandos... fecha chave}

OBSERVAÇÃO IMPORTANTE

Não sei se vocês perceberam, mas no 2º passo do tutorial na 3ª imagem eu realcei 2 dicas do próprio Google Web Fonts que dizem o seguinte:
1ª Dica: Usar muitos estilos de fonte podem retardar sua página web, selecione apenas os estilos de fonte que você realmente precisa em sua página web.
2ª Dica: Se você escolher apenas os idiomas que você precisa, você vai ajudar a evitar a lentidão na sua página.
Então atenção ao usar muitas fontes. Sei que dá vontade de deixar o blog super lindo, mas se exagerarmos podemos diminuir a velocidade de carregamento do blog e isso não é bom.

Espero que vocês tenham gostado!


A reprodução, parcial ou total deste post é proibida sem a autorização da autora.
A citação da fonte é obrigatória.


Fonte: Aprendi a Usar fontes diferentes no meu blog neste Site
Como usar Fontes Diferentes em seu Blog do Blogger Como usar Fontes Diferentes em seu Blog do Blogger Reviewed by Aurea on 9/02/2012 Rating: 5

41 comentários:

  1. Aurea, adorei as dicas!!!
    Estou querendo reformular meu blog e aos poucos estou pegando todas as dicas.
    Obrigada pelo tutorial!

    ResponderExcluir
  2. @Fê CosttaOlá Fê,

    Fico feliz que você tenha gostado.
    Se tiver alguma sugestão de post envie que vejo se consigo produzir um bem legal!
    Um abraço.

    ResponderExcluir
  3. Nossa adorei a dica,vou ja mudar a fonte do meu blog;
    Gostei muito do seu espaço amiga,tudo de bom e muitos sucessos pra voçe,Abraços!

    ResponderExcluir
  4. @Jucyy SoaresOlá Jucyy,
    Fico feliz que tenha gostado do post e que vai usar o que aprendeu aqui em seu blog.
    Visitei seu blog e gostei porque gosto muito de séries.
    Muito sucesso para você!
    Um abraço.

    ResponderExcluir
  5. amei a dica! Mas eu fiz tudo certinho e no final o título não ficou no lugar certo, ele ficou bem em cima no tamplete e não no meio, tem como abaixar?

    ResponderExcluir
  6. Adorei essa dica! Já estou mudando meu blog *-* Obrigada !!! :D

    ResponderExcluir
  7. @Leka SamaOlá Leka,
    Que bom que gostou espero que fique bem legal!

    ResponderExcluir
  8. Show!! Direta e prática!! Aquelas 6 fontes quebram qualquer tentativa de melhoria dos posts! Obrigado!

    ResponderExcluir
  9. @Aniinha PiiresAnjiinha Piires,

    Que bom que gostou!
    Seja bem vinda!

    ResponderExcluir
  10. @Thamar FreireOlá Thamar,

    Legal saber que você gostou do post e que vai ajudá-lo a melhorar seu blog.
    Seja sempre bem vindo!

    ResponderExcluir
  11. No meu estar dando erro
    Aparece assim: Erro ao analisar XML, linha 2272, coluna 135: The element type .....

    O que pode estar errado?

    ResponderExcluir
    Respostas
    1. Nani,
      Isto significa que na linha 2272 tem algum comando que está errado. Revise esta linha para ver se não falta aspas "" ou barra / etc...

      Se você seguiu este tutorial certinho não tem como dar erro. Infelizmente não sei dizer o que está errado com o seu template.

      Seja bem vinda!

      Excluir
  12. Nossa, vc explica muito bem, se eu consegui, qualquer um consegue rs, agora uma pergunta: mudei a fonte do título das postagens e o título dos gadgets, que no meu caso, ficam na coluna lateral a direita, porém, uso as páginas estáticas do blogger para "inicio" e "sobre" do meu blog, e esses títulos não mudaram a fonte, procurei e não acho qual o trecho do html que se refere a estas páginas pra eu mudar a fonte....vc sabe como eu posso fazer pra mudar a fonte desses títulos das páginas? Desde já agradeço!! Um forte abraço!!

    ResponderExcluir
    Respostas
    1. Olá Jessica,
      Mande o URL do seu blog para eu entender melhor o que você quer. Pode mandar por comentário mesmo, não será publicado por ser regra do daqui não publicar comentários com links.
      Onde você alterou as fontes? No sidebar h2 e post h3?
      Estou aguardando.

      Excluir
  13. Muito útil, usei em meu blog! Obrigado e sucesso com o site :))

    ResponderExcluir
    Respostas
    1. Olá Luíza,
      Que bom que o tutorial foi útil para você. Fico feliz por isso. Esse é o objetivo do TPV.
      Seja sempre bem vinda!

      Excluir
  14. Aurea, você explica muito bem. Obrigada.
    Mas no meu HTML não encontro nenhuma destas opções de linha que você disse
    Quando pesquiso na caixa, aparece apenas esse: h3.post-title.comments h4
    Como posso prosseguir? Coloquei o link da fonte antes do "head" e acrescentei a família da fonte nesta linha que encontrei, mas não deu certo. Será que você poderia me ajudar?
    Obrigada!
    Até!
    Carol

    ResponderExcluir
    Respostas
    1. Olá Carol,
      Você verificou se no bloco de códigos do título dos posts h3 já existe uma font-family configurada? Se tiver substitua pela fonte escolhida. Ao que parece você usa um template 2010 do blogger. Estes templates possuem a opção de alterar as fontes pelo próprio blogger e até de colocar fontes novas, mas ainda não tentei. Talvez não tenha a fonte que você deseja no painel do blogger. Entendo.
      Tentei acessar seu blog para visualizar melhor, mas seu perfil não está disponível.
      Seja bem vinda ao TPV!

      Excluir
    2. Carol,
      Encontrei uma solução:
      Substitua a linha: font: $(post.title.font); do bloco de códigos h3.post-title.comments h4 que você encontrou pela linha da fonte que escolheu que irá funcionar.
      Vou atualizar este post para o modelo 2010.

      Excluir
  15. No meu o titulo da postagem não muda

    ResponderExcluir
    Respostas
    1. Olá Gabriel,
      Você usa um template novo do blogger?
      Se sim. Vou fazer alguns testes nestes templates e publicarei as atualizações neste post logo que possível!
      Não consegui visualizar o seu blog pelo seu perfil do G+.
      Seja bem vindo ao TPV.

      Excluir
  16. Olá Aurea, nossa parabens pela paciencia de postar este tuto... ajudou muito... só tem uma coisinha... agora não consigo mais mudar o tamanho das letras do blogger... vc sabe me ajudar?

    ResponderExcluir
    Respostas
    1. Olá Débora,

      Primeiramente você deve tirar o comando da fonte onde está seu título porque está aparecendo na barra de abas.
      Mantenha só o título ou altere a linha para esta: <title><data:blog.pageTitle/></title>

      Para que o seu título apareça com a fonte que deseja. Altere nesta parte do código.
      .Header h1 {
      font: $(header.font);
      color: $(header.text.color);
      text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
      }

      → Troque a linha: font: $(header.font);

      → Por
      font-size:60px;
      font-family: 'Clicker Script';

      Veja que a fonte definida para o título é a Clicker Script. A fonte que você escolheu. E o tamanho você define em font-size.

      Seu blog é lindo! Gostei de visitá-lo!

      Seja bem vinda ao TPV!

      Excluir
    2. Oi Aurea, obrigada pela ajuda minha querida. Tah quase td arrumadinho por lá! bjos
      Meu blog: Diário de uma Amadora

      Excluir
  17. Procurei por 'body' no meu blog, mas achei um monte, qual correto?

    ResponderExcluir
    Respostas
    1. ja consegui mudar a fonte de todo o blog, mas o titulo na muda, procurei o código .post h3 { e ele aparece certinho, realizo todos o os paço do tutorial, mas não muda! teria como me ajudar?

      Excluir
  18. Aurea,

    Adorei as dicas e senti que essa questão de personalização, com as dicas certas, deixa de ser um bicho de 7 cabeças e se torna de 6, rs. Só que não consegui fazer o que eu queria... não sei se eu entendi errado ou se coloquei errado.

    É o seguinte, a fonte de todo o blog tá personalizada. A única fonte que não tá mudando (pela mudança avançada lá do modelo mesmo), é a do texto do post. Eu tentei, pelo esquema que você explicou, colocar ela como padrão do blog, mas mesmo assim continuou igual...

    Não sei mais o que fazer! D:

    ResponderExcluir
  19. Aurea, parabéns foi ótimo poder contar suas dicas, um grande abraço.

    ResponderExcluir
  20. Como faço para alterar apenas do Menu "início"?

    ResponderExcluir
  21. Foi o único tutorial que realmente me ajudou!Obrigada

    ResponderExcluir
  22. Ajudou muito.Obrigada.Mas quando coloquei no blog,meu plano de fundo sumiu.O que eu faço?

    ResponderExcluir
  23. Moço me perdi toda, nao achei, eu to pelo pc, e nao encontrei

    ResponderExcluir
  24. Áurea, bom dia.
    Adorei sua matéria.
    Pretendia mudar apenas a fonte do Perfil do Blogger, mas não estou conseguindo aplicar.
    Poderia me auxiliar?
    Obrigada,
    Key

    ResponderExcluir
  25. Perfeito me ajudou muito! Parabéns!

    ResponderExcluir
  26. Quero colocar diferentes fontes para cada título de cada gadget, tem como? Alguém saberia me dizer?

    ResponderExcluir

Todos os comentários são lidos e moderados antes da publicação.
Para que seu comentário seja publicado leia a Política de Comentários do Blog no post Regras do Blog

Tecnologia do Blogger.