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

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.

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.

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".

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"

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".

Super Dicas Blogger

Páginas