Fontes difetentes no seu blog

|
Oi gente, primeiramente, quero agradecer muito pelos mil seguidores alcançados! Estou muito orgulhosa e muito agradecida!

Hoje vou ensinar vocês a como usar fontes diferentes no seu blog, sem ser aquelas disponiveis no designer de modelo.
image

No Google Web fonts, estão disponíveis mais de 200 fontes para você personalizar seu blog. Não é difícil usá-las, basta entender um pouco de CSS e prestar atenção no tutorial.



1as12 Vá nesse site: http://www.google.com/webfonts
1as12 Escolha a fonte de sua preferência, no exemplo eu escolhi a fonte Yellowtail. Clique em quick use:
image

1as12 Na página que aparecer, vá descendo até achar essa parte:
image

1as12 Copie o código, vá no HTML do seu blog, procure por <head> e cole o código logo abaixo.
1as12 Para esse código funcionar, são necessárias algumas modificações. Primeiro adicone uma barra antes do >. Deve ficar assim:

<link href='http://fonts.googleapis.com/css?family=Yellowtail&v2' rel='stylesheet' type='text/css'/>


1as12 Agora apague essa parte do código que fica logo após o nome da fonte: &v2
1as12 Seu código vai ficar mais ou menos assim:

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


1as12 Salve seu HTML mas não feche a página. Agora vamos aplicar a fonte no blog.
1as12 Se quiser usar a fonte no título do blog procure por:

h3.post-title a {


1as12 Logo abaixo desse código, você vai ver isso:

font: $(post.title.font);
color: $(post.title.text.color);



1as12 Substitua esse código por esse abaixo, substituindo onde se pede:

font-family: Nome da sua fonte;
color: #código da cor;



1as12 Agora, se quiser mudar a fonte dos títulos da sidebar, procure por h2 { e apague o código abaixo:

font: $(widget.title.font);
color: $(widget.title.text.color);



1as12 Cole no lugar o mesmo código que eu passe antes e substitua o que se pede ^^

Espero ter ajudado gente! Kissus
sing-liah

41 comentários

  1. Amei o tutorial, ajudou muito! 

    misspenelope-teen.blogspot.com

    ResponderExcluir
  2. Me ajudou o tuto ae, mais uma vez valeu Liah. 
    Beijoss :*

    ResponderExcluir
  3. amei o tutorial, com certeza ira me ajudar muito
    http://cupcakebomb-js.blogspot.com/

    ResponderExcluir
  4. Ain que facinho!!!
    Amor, o que aconteceu com o CB ontem? Eu não consegui entrar... ):
    Parabéns pelos mil seguidores, voc merece cada um deles e muito mais!!

    Um beijo, L.
    miss-scd.blogspot.com

    ResponderExcluir
  5. To seguindo.Esse blog é lindo!
    Me segue se gostar do meu blog?
    http://terminal-nanda.blogspot.com 
    bjs

    ResponderExcluir
  6. O nome da fonte onde eu pego?

    ResponderExcluir
  7. Uuuh, já consegui. (:

    ResponderExcluir
  8. O ruim do Google Web Fontes é que não tem fontes mais 'bonitinhas', como as que usamos em layouts, tipo PR8 Charade, Luna Bar, Blackout Midnight, RNS Baruta Black, etc.

    http://viihs-place.blogspot.com/

    ResponderExcluir
  9. Nossa! Amei esse tuto! Ficou simplesmente magnífico e ajudou bastante! Mto obrigada Liah! 

    P.S. - Parabéns pelos 1000 seguidores! XDDD
    Kisses enormes da Baby

    ResponderExcluir
  10. Quando vc tiver escolhendo, tem o nome da fonte do canto esquerdo

    ResponderExcluir
  11. É q eu tentei mudar o domínio e não deu mt certo kkk
    Obrigada!

    ResponderExcluir
  12. Adorei o tutorial Liah ;D.

    ResponderExcluir
  13. amei o tutorial.
    eu uso o Blog em Rascunho, que já vem com algumas fontes, mas com esse tutorial fica mais fácil escolher uma fonte diferente.

    tem promoção no Chuva de Morangos:
    PROMOÇÃO 15 DIAS DE DESTAQUE

    ResponderExcluir
  14. Ooi amor!
    O My Chic Planet está fazendo um sorteio concorrendo:
    -Destaque no blog até o final do ano
    -Post de divulgação
    -Afiliação e Parceiria
    E muito mais!
    Entre em http://mychic-planet.blogspot.com/2011/07/soorteiio.html#comments
    E garanta já sua chance de ganhar!
    BjsBjs ;* BiihBarbonii
    www.mychic-planet.blogspot.com

    ResponderExcluir
  15. amei, há tempos que queria saber como fazia isso!
    xêru

    ResponderExcluir
  16. A fonte ficou mto pequena, como eu deixo ela maior?
    Responde lá no meu blog:www.conselhosdostardoll.blogspot.com

    ResponderExcluir
  17. Ah, já consegui. Mas obrigada mesmo assim!

    www.conselhosdostardoll.blogspot.com

    ResponderExcluir
  18. Não, soh dá pra escolher onde colocar pelo HTML

    ResponderExcluir
  19. eu uso o cufon e muito melhor !
    http://lojinha-poke-star.blogspot.com/

    ResponderExcluir
  20. A-M-E-I a dica!! E tem que ter muita paciência pra achar uma boa fonte.

    XX, Mandy
    http://wishoffashion.blogspot.com/

    ResponderExcluir
  21. Ajudou muito e muito'
    Até apliquei em meu blog!

    Beijos http://wwwgertiegirlcom.blogspot.com/

    ResponderExcluir
  22. eu quero colocar no titulo do blog, como faz? eu nem sei o q e sidebar

    ResponderExcluir
  23. oii liah.
    eu segui todo o tutorial direitinho só que eu não consegui colocar no título do post... pode me ajudar??

    ResponderExcluir
  24. O problema é que as fontes são muito pequenas!

    ResponderExcluir
  25. Oi! Amei o blog.
    To siguindu!!^^
    Seg de volta:
    (é meio novinho...)
    http://lugarzinho-meu.blogspot.com/

    bjs e vlw por ler ^^

    ResponderExcluir
  26. Brigado pelo tuto, foi utilíssimo.
    Mas como aumenta as fontes no titulo dos post's??

    ResponderExcluir
  27. Amei o post! Garotas Deem uma olhadinha no meu blog novo :3 http://blogueirasmania.blogspot.com.br/ obrigada.

    ResponderExcluir
  28. Cherry, funciona mas a letra fica muito pequena, dei uma olhada no HTML mas não consegui resolver.

    ResponderExcluir
  29. Foi muito útil pro meu blog, só qe eu tive que fazer umas adaptações pq ñ queria aplicar no template do Blog ;]

    photoscapeforme.blogspot.com

    ResponderExcluir
  30. Adoreiii o tutorial! E coloquei com muita facilidade em meu blogger!!

    bjuxx

    ResponderExcluir
  31. Eu não consegui colocar a fonte no título :c

    ResponderExcluir
  32. Amei ! My blog ; http://bgssempree.blogspot.com.br/

    ResponderExcluir
  33. Eu tentei, só que a fonte ficou muito pequena, me ajuda? Não estou conseguindo aumentar de nenhum jeito! Fica minuscula, e feia

    ResponderExcluir
  34. Nossa muito obrigada esse tuto é perfeito passa lá no meu blog!!(quando estiver pronto né)
    http://girls-dominate.blogspot.com
    ja estou seguindo seu blog é muito perfeito<3

    ResponderExcluir
  35. Oie......ajuda por favor eu não to conseguindo : ( meu email camila.regina.dsouza@gmail.com

    ResponderExcluir
  36. Obrigada pelo tutorial ajudou muito.

    ResponderExcluir
  37. Pra quem a fonte ficou pequena, é só procurar por: h3.post-title a { vc vai encontrar um trecho assim:

    h3.post-title a {
    font-family: Open Sans Condensed;
    color: #8B795E;

    Cole abaixo desse código acima, este código:
    font-size: 30px;

    depois é só alterar onde está 30px pro tamanho desejado ;)

    espero ter ajudado!

    http://mayaupairnoseua.blogspot.com

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...