Como usar Fontes Diferentes em seu Blog do Blogger

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º Conheça o site: Google Web Fonts.
» Escolha a fonte que mais lhe agradar no 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'>
» 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 do autor.

A citação da fonte é obrigatória.




Fonte: Aprendi a Usar fontes diferentes no meu blog neste site


©2009 Templates para Você
Aproveite que você assina o nosso Feed e me acompanhe no Twitter ;)


Add to Google

Nenhum comentário:

Postar um comentário

CALENDÁRIO!

Postagens populares