A VOZ DO CORAÇÃO Tina Ernestina Reis : 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