Fontes Diferentes para usar no Blogger

Pin It
26 Comentários »

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 »



26 comentários em: “Fontes Diferentes para usar no Blogger

  1. Link Vagas disse:
    Olá!

    Gostaria de saber como faço para alterar tamanho e fonte do titulo(cabeçalho) do meu blog?

    poderia me ajudar por favor?

    Obrigado

  2. Srtª.Juliia /O Diario de uma Adolescente disse:
    quando eu testei com o seu codigo deu certo, mas quando escolhi a minha fonte não funcionou, porque será?
  3. Vítor Teixeira disse:
    Não aconteceu nada. Coloquei o código exatamente em cima de /head e também o código de font-family, que eu imagino também estar no lugar correto. Mas não mudou nada!
  4. Christiano Augusto disse:
    INCRÍVEL, parabéns pela dica!
  5. .:: Clau ::. disse:
    Não respondo nenhum tipo de pergunta por email. Mais informações, leia os Termos de Uso do Blog.
    Sobre os títulos da minha sidebar eu uso imagem como titulo. Já publiquei um tutorial ensinando a fazer isso:
    Substituir Títulos da Sidebar por Imagens
  6. Maykel disse:
    Olá, clau! Gostei muito dessa matéria sobre fontes! Há uma coisa que eu gostaria muito de saber na qual iria me ajudar muito! tenho anúncios da google no meu blog, mas uma coisa é que gostaria de centraliza-los e outra é fazer como no seu blog escrever "Publicidade" em cima para saberem o que é! E com essa fonte diferente e elegante que vc usa! E gostaria também se você puder forcener uma dica para tirar aquela barra de pesquisa que já vem com o template sabe? Muito Obrigado des de já! Seu blog é maravilhoso!!! Bom de uma olhada no meu blog, para se Puder responder as minhas perguntas!

    http://www.mascarasdaverdade.blogspot.com

    ou pelo e-mail

    maykel.winchester@hotmail.com

    Abraço, bom restinho de semana!

  7. .:: Clau ::. disse:
    Andreza
    Dá uma relida no tutorial,pq eu acrescentei uma informação no item 3. Tenta apagar o trecho "&subset=latin" no código, acho q é isso q estava dando erro pra vc.
  8. Andreza disse:
    Sim, eu defini! Mas fica aparecendo o mesmo erro: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity "subset" must end with the ';' delimiter.
  9. .:: Clau ::. disse:
    Escravo de maria
    Já entendi o q aconteceu. Este recurso foi lançado no dia 19 de maio deste ano, e eu publiquei o post no dia 21 de maio. O próprio Google API modificou o "embed", pq antes não aparecia esse trecho "&subset=latin" e agora ele aparece. Acabei de ir no site testar e verifiquei isso, portanto, já atualizei o post incluindo novas imagens demonstrativas tb.
    Obrigada pelo toque.
  10. Escravo de maria disse:
    Copie o código que está na primeira caixa “Embed the font into your page”, entre na pagina do blogger e procure por e cole o código, mas coloque uma barra no final do código e retire o trecho &subset=latin senão o blogger não aceitará na hora de salvar, ou seja, o código ficará mais ou menos assim:

    o dicas para Blogs resolveu este problema _clike aqui

  11. .:: Clau ::. disse:
    Andreza
    Vc está definindo o tipo de fonte no elemento que quer usar a fonte? Se não definir, ela não vai aparecer automaticamente em lugar algum. Para ela funcionar, não basta somente instalar a fonte, tem q definir o tipo de fonte q vc escolheu no elemento q vc quer.
    Dá uma relida no tutorial.
  12. Andreza disse:
    Clau, comigo deu o mesmo erro :(
    Eu fiz tudo certinho, tá assim "/>"
  13. .:: Clau ::. disse:
    Escravo de maria
    Leia o comentário número 11. Talvez possa ser isso.
  14. Escravo de maria disse:
    Não foi possível salvar o modelo
    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The reference to entity "subset" must end with the ';' delimiter.
    o que devo fazer?
  15. Jorge Wayne disse:
    Poxa Clau, vlw pela dica… outro gol de placa seu.

    Fico te devendo mais essa.

    Abraço

  16. .:: Clau ::. disse:
    Dea Carvalho
    Vc observou se acrescentou uma barra "/" no final do código? A barra deve ficar antes de ">"
  17. Dea Carvalho disse:
    Interessante… tentei com uma fonte diferente, a Reenie Beanie e não deu certo. Segui exatamente as instruções. Com a fonte que você escolheu dá certo, já com a Reenie Beanie não…
  18. .:: Clau ::. disse:
    MVA
    Isso é problema de configurações do seu windows, não tem nada a ver com o template. Vc vai ter q mexer nas suas configurações do curso no seu pc.
  19. MVA disse:
    Oi. Acabei de mudar o template do meu blog e estou com um sério problema. A cor do cursor/ponteiro de seleção de texto está cinza. E isso está dificultando muito na hora que vou escrever os posts no Windows Live Writer, porque não consigo enxergar onde o texto está selecionado e vira uma bagunça. Não consegui achar na internet nenhum código para mudar isso. Você saberia me ajudar?
    Muito obrigada!
  20. Dani disse:
    Clau, vc é 10!!! Deu certinho!!!

    Beijos

  21. ::Clau:: disse:
    @Blog de Gisoalves
    Muito obrigada pela visita e pelo comentário. Eu quem agradeço sua presença e volte sempre!

    @Achei na internet:
    Temos vários tutoriais que ajudam a encrementar seu blog, dá uma olhada no nosso indice que com certeza vc vai encontrar alguma coisa que te ajude:
    Tutoriais para blogger – Indice.

  22. Achei na internet disse:
    Oi,voce parece ser bastante esperiente em Blogger,sou novo em blogger,voce poderia me ajudar ???…Bom,depois de criar meu blogger :http://www.blogger.com/html?blogID=522757649703389854 eu baixei um template e coloquei,repara que quando eu posto alguma coisa fica uma parada rosa em cima dos titulo lah,nao sou muito fan da cor,queria trokar,voce sabe como faço isso ???…Espero respostas ! pag. em favoritos …vlws
  23. Blog de Gisoalves, A paz de Deus esteja com nós* disse:
    AMEI TODAS AS DICA DESTE BLOG, O DONO DESTE BLOG ESTÁ DE PARABÉNS POR ESTE LINDO TRABALHO,EU ADOREI O MENU FLUTUANTE DE COLAGEM, E SUPER INTERESSANTE,( UM TIK TAK PARA VC ATÉ MAIS)
  24. ::Clau:: disse:
    @Priscilla de la Fleuret:
    Fico feliz que tenha gostado…obrigada pela visita e volte sempre!

    @Avelino:
    Olha pra ser sincera, eu nunca mudei nada disso e vejo que meu SEO anda muito bem obrigada…=)
    Vc deve tomar cuidado em modificar demais seu template, isso pode acabar, ao invés de ajudando, te atrapalhando.

  25. Avelino disse:
    Olá Clau!

    Gostei da dica de mudar as fontes do blog,mais tem uma coisa que me aborrece não consigo mudar o titulo do post depois de ter mudado .post h3 para .post h1 ,porque no ebook do icebreak ensina a fazer isto para melhorar o seo do blog,mais agora só pelo painel que muda as cores,fontes e tamanho que consigo alterar,no codigo eu altero e não muda nada,não sei porque…

    Abraços!

  26. Priscilla de la Fleuret disse:
    Adorei a novidade,hihi.Mas por enquanto vou aguardar sair novas fontes =P

    Bjocas

PageRank Checking Icon

© 2009-2014 Mundo Blogger - Todos os direitos reservados | Design by Vanessa |