Como usar fontes especiais no blog?

em 19 de agosto de 2013


Há bastante tempo eu uso aqui no blog fontes 'diferentes' para os títulos das postagens e dos elementos de página da sidebar.
O Blogger, através de seu painel de personalização, oferece muitas opções.
Mas a variedade aumenta, e muito, se usarmos as fontes oferecidas aqui:
Google Fonts
Trata-se da página do Google com todas as fontes que o Blogger suporta.
É uma infinidade, muitas delas lindas e nos mais variados estilos.

Como instalar e usar fontes diferentes no blog?

Para começar selecione a fonte ou as fontes que deseja usar.
Você pode instalar no blog quantas desejar, mas evite excessos pois tudo que colocamos no blog tem um peso, mesmo fontes.
Guarde o nome correto de cada uma, ok?

A seguir acesse a aba Modelo de seu blog e clique em Editar html.
Dentro da caixa de código tecle Ctrl+F, e na barra de pesquisa que abrir  localize essa tag de abertura: <head>
Abaixo dela cole esse código:



Repita o código para tantas quantas forem as fontes que deseja instalar.
Caso o nome da fonte seja composto por 2 ou mais palavras coloque um sinal de + entre cada palavra.
Assim:
Grand+Hotel para a fonte Grand Hotel, por exemplo.Sem espaços entre as palavras e o sinal de +.

Salve a modificação.
Claro que a fonte não aparecerá, isso é só o começo.
Agora vamos aprender como usar:

Fonte diferente no título da postagem

Vamos supor que você queira a fonte diferenciada no título da postagem.
Na barra de pesquisa do código-fonte digite isso:



Dê Enter para localizar.
O comando font: $(post.title.font); define que a fonte será definida pelo painel do Blogger.
Para mudar isso e usar a fonte diferenciada que você escolheu basta apagar esse trecho e no lugar dele colocar isso:


Note que coloquei aspas simples no nome da fonte. Isso é importante. Também defini o tamanho da fonte em 35px. Altere esse tamanho conforme desejar.

Caso encontre o trecho  font: $(post.title.font); em mais de 1 lugar altere todos. É preciso que fique igual em todos.
No modelo Viagem, por exemplo, são 3 as ocorrências do trecho. No modelo Simples é apenas 1 e no modelo Marca d'água também é apenas 1. Teste para ver qual seu caso.
Em templates já personalizados, que não sejam os do Design de modelo do Blogger é preciso testar pois cada caso é um caso, ok?

Fontes diferentes nos títulos da sidebar

Para modificar os títulos da sidebar digite isso dentro da caixa de busca:



E troque por isso:



Sendo que Grand Hotel é o nome da fonte e 25px define o tamanho dela.

Depois de pronto salve as modificações.

Fonte diferente no nome do blog

Caso você não use cabeçalho personalizado com imagem em seu blog e queira personalizar a fonte do título do blog faça assim:
Localize esse trecho:

 font: $(header.font);

E substitua-o por este:



Sendo que o nome da fonte e seu tamanho podem (e devem) ser modificados de acordo com seu gosto pessoal.

Clique aqui e aprenda como centralizar os títulos dos gadgets e dos posts e do blog

 *Para copiar os códigos selecione o conteúdo da caixinha e clique Crtl+C.

Viu que simples que é?
Releia o passo a passo até entender certinho.
E não esqueça: teste sempre em um blog de testes antes de aplicar ao blog "oficial".

Conheça a web-série Como personalizar o blog

  1. Como criar um blog: criação da conta Google e criação do blog
  2. Trocar o plano de fundo do blog e alterar largura e disposição das colunas
  3. Centralizar o nome do blog, os títulos dos posts e dos elementos de página (gadgets);
  4. Alterar cores e fontes dos títulos e do texto (fontes especiais, manuscritas, etc);
  5. Criar um menu com abas abaixo do cabeçalho e inserir links nele;
  6. Inserir assinatura personalizada;
  7. Colocar Voltar ao topo com efeito deslizante;
  8. Personalizar os comentários do blog (numerar, separar, incluir opção Responder, etc)
  9. Data dos posts em formato calendário
  10. Número de comentários dentro de um balão  

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

40 comentários , comente também!

  1. Caramba Elaine, essa dica foi de ouro meu bem! Estava justamente procurando sobre isso pois estava com uns probleminhas com as fontes. Sou/amo fonte cursiva e deixa um ar tão clean no blog.. rs rs

    Obrigada por compartilhar isso conosco!

    Beijinhos e tudo de bom ;)

    ResponderExcluir
  2. Ótimo post, Elaine! Como sempre super bem explicado, detalhado e com assunto de extrema relevância, pois acredito que todo(a) blogueiro(a) já desejou fontes diferentes a fim de tornar mais atraente um de seus posts. Taí, revelado, o mapa da mina!
    Abraço, semana vitoriosa pra vc! ;)

    ResponderExcluir
  3. Li, reli e achei bem complexo. Não testei ainda, mas vou experimentar!
    beijooooo

    ResponderExcluir
  4. ADorei!!! Mais uma dica maravilhosa!!! \0/

    ResponderExcluir
  5. Gente do céu!!!! eita dica maravilhosa!!!!
    Obrigada Flor, feliz semana, Xero.

    ResponderExcluir
  6. Quanta coisa boa e ...... difícil rsrsrsr
    Mas você explica direitinho, sempre.
    Uma linda semana.
    Beijos.

    ResponderExcluir
  7. Olá querida!
    Que dica boa!
    Já estou indo lá dar uma espiada nas novidades (adooooooro!)! Fontes nunca são demais, né?! Quanto mais, melhor!rsrsrs
    Beijinhos,
    Cris

    ResponderExcluir
  8. Amei as dicas,
    Dá uma passada lá no blog
    http://thebestteeen.blogspot.com.br/

    ResponderExcluir
  9. Elaine querida,
    como sempre vc nos proporcionando dicas maravilhosas.

    Beijinhos, feliz semana!

    ResponderExcluir
  10. Ui, eu sempre acho tão complicado sempre prefiro te contratar, aliás... assim que publicar o meu livro novo vou voltar a falar contigo sobre aquele projeto do site. ;)
    Beijo, beijoooo
    She

    ResponderExcluir
  11. cheguei aqui através de uma pesquisa para colocar fan page no blog,quero agradecer pelo tutorial deu certinho,seus tutoriais são ótimos.
    http://blogdonadecasatambemsearruma.blogspot.com.br/
    http://deusguianossospassos.blogspot.com.br/

    ResponderExcluir
  12. Elaine, eu fiz um teste e estou chocada! Ficou MARA!!!

    Agora, abusando... como a gente muda a cor da fonte?

    Beijocas.

    ResponderExcluir
  13. Oi Elaine!Já salvei essa dica nos favoritos,acho lindas as letras grandes no titulo e tb gosto de variar o tipo de letra.Bjs e obrigada!

    ResponderExcluir
  14. Oi Elaine, seu blog é tudo de bom, bem didático. Obrigada pelas dicas. Bjs no coração

    ResponderExcluir
  15. Oi Elaine, seu blog é tudo de bom, muito didático. Bjs no coração. Obrigada por partilhar seus conhecimentos

    ResponderExcluir
  16. Oie Elaine estou usando a maioria das suas dicas viu dê uma olhadinha lá:
    estou começando agora e seu blog esta mme ajudando muito vc nem imagina o quantoo... bjinhos...
    http://lucienydias.blogspot.com.br/

    ResponderExcluir
  17. Adorei a dica deu super certo comigo, mas queria saber como fazer isso na fonte das guias? Obrigada.

    ResponderExcluir
    Respostas
    1. Alberto, para trocar a fonte das guias localize a tag font no trecho que define as guias e troque o comenado da fonte pelo da fonte especial que deseja usar.
      bjssss

      Excluir
  18. Eu nao estou conseguindo... ate a parte de acessar modelo e clicar em editar html eu consegui,mas aparece um mooooonte de codigo dentro do quadradinho e mesmo clicando em Ctrl+F nao acontece nada.... to perdidinha! alguem pode me ajudar?? PLEAAASE!!!!

    ResponderExcluir
  19. Ola Elaine,

    tudo bem?

    O meu tema é baixado e não consigo localizar as tags solicitadas... o que eu faço?

    ResponderExcluir
  20. Como é que eu mudo a cor dos títulos das postagens?

    ResponderExcluir
  21. Como colocar a fonte no conteúdo da postagem?????

    ResponderExcluir
  22. Esse foi o melhor tutorial sobre o assunto. Parabéns!!!

    ResponderExcluir
  23. Gostaria muito de saber como você muda o texto do post do blog, o conteúdo mesmo, e o gadget também. não sei qual código usar!

    ResponderExcluir
  24. Eliana, você sabe como eu faço para alterar a letra do comentários nos post?
    Parece que está automático,não sei onde açlterar...
    Obrigada, o posto foi ótimo, bjim!!

    ResponderExcluir
  25. Acho que estou com alguma coisa errada... quando instalo qualquer letra no meu layout aparece esse erro Erro ao analisar XML, linha 2569, coluna 175: The element type "link" must be terminated by the matching end-tag */link*".

    Então vou ver a linha, e é essa:

    *b:section-contents>< b:section-contents id='footer-2-1'/>*

    Acho que travei alguma coisa fazendo as edições... Poderia me ajudar?

    ResponderExcluir
  26. olá gostaria de saber como e onde alterar a cor da fonte das postagens do blogger ?
    obrigado!

    ResponderExcluir
  27. nao estou conseguindo fazer no meu ate a primeira parte foi mais depois nao consegui fazer

    ResponderExcluir
  28. Eu consegui fazer até a primeira parte, após isso não; diz-se que não localiza-se o código que você mostrou: " $ (post.title.font);". Pode me ajudar?

    ResponderExcluir
  29. Queria muito mudar as fontes das postagens!
    O Blogger oferece apenas 7 tipos!
    Essa qdo pode ser alterada também

    ResponderExcluir
    Respostas
    1. Martika, na verdade, não.
      Você pode usar dezenas de fontes, desde que não tenha alterado manualmente a fonte na hora de postar.
      Se alterar vai prevalecer essa alteração, mas se deixar como Fonte Padrão pode ir em Modelo/Personalizar/Avançado/Texto da página e escolher a fonte que desejar como fonte padrão.
      Sim, simples assim.
      bjssss

      Excluir
    2. Oi, tudo bem? Então, estou com dificuldades para alterar a fonte da postagem porque já tentei de tudo e sempre fica a mesma :( Pode me ajudar ?
      http://maniadetelefone.blogspot.com.br/

      Excluir
  30. Gente corre lá no meu blog que tem muitas dicas de moda comidinhas e muito mais corre lá que ta bombando http://relantandomoda.blogspot.com.br/ Ameei as dicas Elaine você me inspira muito você é maravilhosa parabéns <3

    ResponderExcluir
  31. Não estou conseguindo copiar os códigos!

    ResponderExcluir
  32. Elaine parabéns pelo seu trabalho. Me ajude por favor. Tenho um blog https://majottricotcrocheteblablabla.blogspot.com.br/ e estou com problemas na fonte. Veja no final da página que o último parágrafo a fonte está ilegível, minúscula. Por mais que eu corrija e salve, ela não altera o tamanho. E outra coisa, os textos em geral estão com as letras muito clarinhas, já coloquei em negrito e não muda nada, por favor dê um help a essa vovozinha aqui. Obrigada marijoudia@gmail.com

    ResponderExcluir
    Respostas
    1. Majot, bom dia
      Olha, pode ser muitas coisas.
      Em geral, quando escrevemos o post em algum lugar que não seja o editor de postagens (no word, por exemplo) ou copiamos algum trecho de algum lugar e colamos no editor de postagens do blog, carregamos a formatação original e isso pode modificar a fonte.

      Para corrigir sugiro que você vá ao seu blog e copie o trecho que está com erro.
      A seguir edite o post, apague o trecho que está com erro e cole-o de novo, mas preste atenção: se estiver no Chrome use a opção Colar como texto sem formatação.
      Você verá que possivelmente o problema foi corrigido.

      Sobre a cor da fonte em geral ela é alterada em Modelo/Personalizar/Avançado/ e aí tem que achar o comando que define cor do texto, e isso varia de modelo para modelo.

      Espero ter ajudado...
      beijossss

      Excluir
  33. Adorei o post. Mas não deu no meu blog, acredito que seja porque ele já foi modificado :/
    http://www.docemomentoblog.com.br/

    ResponderExcluir
  34. Oi adorei o post, mas eu gostaria muito de aprender a usar o font-face, porque no google fonte tem poucas opções de fontes legais!
    Obrigada
    Beijos =*

    ResponderExcluir

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…