Fontes Diferentes para usar no Blogger

No dia 19 de maio o Blog do Google Code anunciou uma excelente novidade.
O Google API agora disponibiliza um conjunto de fontes de alta qualidade na web e que podem ser usadas no blogger. E o melhor, são fontes gratuitas, licenciadas e armazenadas no próprio Google.
Não necessita hospedar arquivo nenhum, e nem o uso de nenhum script.

Com esta novidade, temos a possibilidade de usar fontes diferentes das tradicionais em nossos blogs, e com isso dar um ar bem diferente aos títulos, cabeçalho ou textos.
Para aplicarmos essas fontes no blog, é necessário instalarmos uma linha de código referente a fonte disponível, feito isso você poderá usar fontes on line armazenadas pelo Google, e seu servidor cuida de converter a fonte em um formato compatível com qualquer browser moderno (incluindo Internet Explorer 6 ou superior).

Por enquanto podemos contar com uma pequena variedade de fontes de código aberto, mas o Google tem trabalhado com um número de talentosos designers de fonte para a produção de uma variada coleção de alta qualidade.

Para conferir a variedade de fontes, e instalar em seu blog, basta visitar a página Google Font Directory.

1) Escolha a fonte que você gostou, clique em cima dela, e depois clique em “Get the code“.
2) Copie o código disponibilizado dentro da 1ª caixinha.
3) Apague o trecho: &subset=latin no código.
3) Para o código ser aceito no seu template, acrescente uma barra / no final do código (a barra deve ficar antes de > ).

O código deverá ficar assim:


<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'/>

4) Agora entre na edição HTML do seu blog, e cole o código ACIMA de </head>

Fazer com que o template reconheça a nova fonte instalada:

Agora que você já instalou a chamada do código da fonte que você escolheu, você pode aplicar a nova fonte em qualquer elemento que você desejar, é só acrescentar a chamada CSS de tipo da fonte (font-family: ‘Yanone Kaffeesatz’, Arial, Serif;)no elemento que você quer, para fazer a fonte funcionar.

Você precisa definir no CSS o tipo de fonte e a familia da fonte: “font-family“.

Exemplo 1:
Para aplicar uma fonte no Titulo do blog (Header/cabeçalho), você deve definir o tipo de fonte em:
#header h1
Desta forma:


#header h1{
font-family: 'Yanone Kaffeesatz', arial, serif;
}

Exemplo 2:
Para aplicar a fonte nos títulos dos post, você deve localizar o código CSS , que geralmente é .post h3 ou .post-title, dependendo do modelo do seu template.
E acrescente o código defindo o tipo de fonte.


.post h3{
font-family: 'Yanone Kaffeesatz', arial, serif;
}

Recomendo que leia o artigo que trata sobre como Personalizar os títulos dos posts. Veja o item sobre “Definir tipo de fonte para o título”.

Nos exemplos acima eu apliquei a fonte ‘Yanone Kaffeesatz’, porque foi a fonte que escolhi para utilizar como exemplo, mas você deve colocar o nome da fonte que você escolheu.
Para saber a família da fonte que você escolheu, basta copiar a parte que aparece em negrito, no código disponibilizado na 2º caixinha, fornecido pelo site.

Essas fontes também funcionam bem com aplicação de CSS3, portanto você pode incluir vários efeito, como Efeito Sombra , por exemplo.

Bom , é isso!
Boa blogagem…

Vanessa é blogueira desde 2009, e 'aspirante' a web design nas horas vagas. Autodidata, viciada em internet, adoradora de blogs, seus códigos e templates, apaixonada por programas gráficos, tecnologia e web design,e fascinada pelo estilo gótico. Leia Mais sobre a autora »

Comentários
  1. Link Vagas
  2. Srtª.Juliia /O Diario de uma Adolescente
  3. Vítor Teixeira
  4. Christiano Augusto
  5. .:: Clau ::.
  6. Maykel
  7. .:: Clau ::.
  8. Andreza
  9. .:: Clau ::.
  10. Escravo de maria
  11. .:: Clau ::.
  12. Andreza
  13. .:: Clau ::.
  14. Escravo de maria
  15. Jorge Wayne
  16. .:: Clau ::.
  17. Dea Carvalho
  18. .:: Clau ::.
  19. MVA
  20. Dani
  21. ::Clau::
  22. Achei na internet
  23. Blog de Gisoalves, A paz de Deus esteja com nós*
  24. ::Clau::
  25. Avelino
  26. Priscilla de la Fleuret