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:
» 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▼
» Selecione o código da fonte ▼. Copie.
» Cole acima da tag <head> do seu template.
Para isso vá em: → Modelo → Editar HTML
Este é o código que você copiou no Google Web Fonts.▼
♦ Para mudar a fonte do título dos posts:
» Vá em Editar HTML procure por: (Use Ctrl+F)
» Adicione a linha abaixo na frente da 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 é:
♦ Para mudar a fonte do título das gadgets (sidebars):
♦ Você também pode mudar a fonte do blog todo colocando a font-family no comando:
Espero que vocês tenham gostado!
Fonte: Aprendi a Usar fontes diferentes no meu blog neste Site
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» 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'><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 {h3.post-title {.post-title {» Adicione a linha abaixo na frente da chave {
font-family: 'Oregano', cursive;.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.
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
Reviewed by Aurea
on
9/02/2012
Rating:
Reviewed by Aurea
on
9/02/2012
Rating:
Aurea, adorei as dicas!!!
ResponderExcluirEstou querendo reformular meu blog e aos poucos estou pegando todas as dicas.
Obrigada pelo tutorial!
@Fê CosttaOlá Fê,
ResponderExcluirFico feliz que você tenha gostado.
Se tiver alguma sugestão de post envie que vejo se consigo produzir um bem legal!
Um abraço.
Nossa adorei a dica,vou ja mudar a fonte do meu blog;
ResponderExcluirGostei muito do seu espaço amiga,tudo de bom e muitos sucessos pra voçe,Abraços!
@Jucyy SoaresOlá Jucyy,
ResponderExcluirFico 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.
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?
ResponderExcluirAdorei essa dica! Já estou mudando meu blog *-* Obrigada !!! :D
ResponderExcluir@Leka SamaOlá Leka,
ResponderExcluirQue bom que gostou espero que fique bem legal!
Muito obrigada :)
ResponderExcluirShow!! Direta e prática!! Aquelas 6 fontes quebram qualquer tentativa de melhoria dos posts! Obrigado!
ResponderExcluir@Aniinha PiiresAnjiinha Piires,
ResponderExcluirQue bom que gostou!
Seja bem vinda!
@Thamar FreireOlá Thamar,
ResponderExcluirLegal saber que você gostou do post e que vai ajudá-lo a melhorar seu blog.
Seja sempre bem vindo!
Muito obrigada!!!
ResponderExcluirQue bom que gostou Ana. Seja bem vinda!
ExcluirNo meu estar dando erro
ResponderExcluirAparece assim: Erro ao analisar XML, linha 2272, coluna 135: The element type .....
O que pode estar errado?
Nani,
ExcluirIsto 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!
Obrigada!
ResponderExcluirvou verificar
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!!
ResponderExcluirOlá Jessica,
ExcluirMande 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.
Muito útil, usei em meu blog! Obrigado e sucesso com o site :))
ResponderExcluirOlá Luíza,
ExcluirQue bom que o tutorial foi útil para você. Fico feliz por isso. Esse é o objetivo do TPV.
Seja sempre bem vinda!
Ae, Valeu Mano.
ResponderExcluirAurea, você explica muito bem. Obrigada.
ResponderExcluirMas 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
Olá Carol,
ExcluirVocê 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!
Carol,
ExcluirEncontrei 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.
No meu o titulo da postagem não muda
ResponderExcluirOlá Gabriel,
ExcluirVocê 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.
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?
ResponderExcluirOlá Débora,
ExcluirPrimeiramente 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!
Oi Aurea, obrigada pela ajuda minha querida. Tah quase td arrumadinho por lá! bjos
ExcluirMeu blog: Diário de uma Amadora
Procurei por 'body' no meu blog, mas achei um monte, qual correto?
ResponderExcluirno meu é o terceiro :)
Excluirja 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?
ExcluirAurea,
ResponderExcluirAdorei 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:
Aurea, parabéns foi ótimo poder contar suas dicas, um grande abraço.
ResponderExcluirComo faço para alterar apenas do Menu "início"?
ResponderExcluirFoi o único tutorial que realmente me ajudou!Obrigada
ResponderExcluirAjudou muito.Obrigada.Mas quando coloquei no blog,meu plano de fundo sumiu.O que eu faço?
ResponderExcluirMoço me perdi toda, nao achei, eu to pelo pc, e nao encontrei
ResponderExcluirÁurea, bom dia.
ResponderExcluirAdorei sua matéria.
Pretendia mudar apenas a fonte do Perfil do Blogger, mas não estou conseguindo aplicar.
Poderia me auxiliar?
Obrigada,
Key
Perfeito me ajudou muito! Parabéns!
ResponderExcluirQuero colocar diferentes fontes para cada título de cada gadget, tem como? Alguém saberia me dizer?
ResponderExcluir