Como usar uma fonte diferente nos títulos do blogger

Mude as fontes dos títulos, subtítulos e descrição do blog 

Deixe seu blog mais atraente colocando uma fonte de texto diferente nos seus títulos, no google fonts existem vários estilos de fontes true type para escolher e todas são grátis, o site também oferece as fontes do site fonts.com que é um dos melhores sites de fontes true type da internet, mais o melhor de tudo é que o google te dá o código já pronto pra uso, ou seja, é só copiar o código e usar, sem precisar de nenhum programa pra isso, e para colocá-la no blogger é muito fácil e rápido.

 Escolher a fonte a ser usada

colocar fonte do google font no blogger
escolher a fonte no google fonts

 Acesse o Google Fonts e escolha uma fonte que combine com o layout do seu blog, no campo "preview text" escreva o título do seu blog, assim fica mais fácil de saber como a fonte vai ficar no blog, se quiser pode selecionar várias clicando em "add to collection" e depois decidir qual é a melhor, a lista com as fontes escolhidas aparecerão na parte de baixo da tela, você pode clicar em "review" para visualizá-las em tamanho maior lado a lado, para excluir clique no "X" ao lado delas, e em "use" para gerar o código.

colocar fonte diferente no blogger
escolher o estilo da fonte

Marque os estilos desejados e logo abaixo será gerado o código, ao lado aparece um velocímetro mostrando o tempo que a página do blog vai demorar pra carregar usando aquela(s) fonte(s), quanto mais próximo o ponteiro estiver do verde mais rápido será o carregamento, evite fontes que demorem pra carregar isso pode dificultar que seu blog apareça em resultados de busca como as do google, bing e yahoo. 

código de fonte true type para blogger
copiar código

 Eu escolhi 3 fontes diferentes no google fonts (sniglet, londrina outline e freckle), veja
código google fonts: <link href='http://fonts.googleapis.com/css?family=Sniglet|Londrina+Outline|Freckle+Face' rel='stylesheet' type='text/css'>
Para o blogger o código certo é o "standard", mais abaixo aparecerá o nome das fontes, copie o código standard.

Como colocar a nova fonte no blogger

 Para esse tutorial eu usei o modelo simples do blogger, antes de fazer qualquer alteração no seu template faça backup do seu blog.

 No blogger, vá na aba "modelo" e em "html", procure pela linha <title></title> que fica logo no começo, dê enter e cole o código abaixo dessa linha, adicione "/" ao final do código, assim ('text/css'/>). Clique em "salvar modelo".

colocar fonte diferente no blogger
como colocar o código no html do blogger

 Agora clique em "modelo" e em "personalizar, abrirá uma página, vá em "avançado" e logo ao lado em "adicionar css"


colocar css no blogger
inserindo os códigos css no blogger


Para mudar a fonte do título do blog

 Vou usar a fonte Londrina Outline, o item a ser editado é o ".titlewrapper h1", copie e cole na caixa em branco: .titlewrapper h1, h1.title a {font: 40px verdana, arial, helvetica, sans-serif; color: #eee333; padding: 8px;}

 Para que a fonte mude basta trocar o nome dela:
.titlewrapper h1, h1.title a {font: 40px Londrina Outline, arial, helvetica, sans-serif; color: #eee333; padding: 8px;},
 repare que não usa o sinal + para separar as palavras como no código do google fonts e sim apenas um espaço, a fonte a ser usada tem que ser a primeira a aparecer, no exemplo eu a coloquei no lugar da verdana.

 Você verá a alteração de imediato na página, você também pode alterar o tamanho e a cor da fonte, o tamanho é definido em "px" você pode aumentar ou diminuir a quantidade de px, e a cor é definida assim: #123abc (jogo-da-velha mais uma combinação de números e letras), veja a tabela completa de cores html, copie o código da cor desejada e substitua, essa alteração muda a cor da fonte do item escolhido.

Para alterar a fonte dos títulos, descrição e parágrafos


Título do post

cole código abaixo e altere o nome, tamanho, cor
h3.post-title, h3 a {color: #000 !important; font: 26px Sniglet, verdana, arial;} apague a cor (color: #000) se não quiser que ela seja alterada.

Título interno do post e das widgets

cole código abaixo e altere o nome, tamanho, cor
h2 {color: #000; font: 26px verdana, arial, helvetica, sans-serif;}

Subtítulo do post

cole código abaixo e altere o nome, tamanho, cor
h3 {color: #000; font: 26px verdana, arial, helvetica, sans-serif;}

Título secundário

cole código abaixo e altere o nome, tamanho, cor
h4 {color: #000; font: 26px verdana, arial, helvetica, sans-serif;}

Descrição do blog - A descrição aparece logo abaixo do nome do blog

cole código abaixo e altere o nome, tamanho, cor
.descriptionwrapper {color: #000; font: 26px verdana, arial, helvetica, sans-serif;}


Parágrafos - é o texto das postagens do blog

cole código abaixo e altere o nome, tamanho, cor
body {color: #000; font: 16px verdana, arial, helvetica, sans-serif;}

Após todas as alterações visualize o template e salve as alterações clicando em "aplicar ao blogger".

9 comentários:

  1. Mas isso só altera a fonte na página inicial...

    ResponderExcluir
    Respostas
    1. nos testes que fiz as fontes funcionam em todas as páginas, veja se não esqueceu de colar algum código, cada item do layout tem um código específico.

      Excluir
  2. E se eu quiser deixar o titulo do blog de um tamanho e o resto de outro? Porque no caso, aumentando o tamanho no px não vai...

    ResponderExcluir
    Respostas
    1. pra alterar o tamanho da fonte você precisa aumentar ou diminuir a quantidade de pixels, você pode declarar uma tamanho diferente pra cada tipo de texto, quando algum código não funcionar declare !importante pra forçar-lo, exemplo (para o título do blog)
      .titlewrapper h1, h1.title a {font: 14px !important 'Open Sans Condensed', verdana, arial; }
      caso não funcione mande o link do seu blog pra eu ver o código

      Excluir
  3. n consegui fazer, coloquei tds o codigos e mesmo assim deu erro na linha 639 coluna 5

    ResponderExcluir
  4. você pode ter colocado o código no lugar errado ou sem querer danificou o css, se puder copie todo o código com erro e me envie por e-mail lm.templates@yahoo.com

    ResponderExcluir
  5. muito bom seu blog respostas bem escritas.

    ResponderExcluir
  6. NÃO DEU CERTO. Tá um pouco confuso isso, eu não consegui entender e tentei diversas maneiras e não deu certo.

    ResponderExcluir