sábado, 14 de abril de 2012

Instalando fontes diferentes no blog


Tumblr_m2fjo5sngj1rs1kxwo1_500_large
É um tutorial super simples mais requer atenção ok? Funciona assim, através do site google web fontes você instala quantas fontes quiser em seu template (via HTML). E você pode usar em qualquer elemento que desejar, (exemplo na área dos comentários, titulo das postagens, enfim onde quiser desde que você ache os códigos de cada elemento que deseja alterar a fonte padrão)... Muuuita calma nessa hora que eu vou explicar tudo certinho no decorrer do tutorial!

1° acesse o site (www) e escolha a fonte que você mais curtiu
2° clique em QUICK-USE

3° Copie o código disponibilizado, veja:

4° para o código ser aceito no template você deverá colocar esta barrinha / antes de > Ficando assim:

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'/>
5° Vá no seu HTML e cole o código da sua fonte acima de </head>
Pronto a fonte foi instalada!
 Lembrando que você pode instalar quantas fontes quiser
Agora você pode aplicar a fonte em qualquer elemento que quiser é só alterar o nome das fontes padrões pelo o nome da fonte instalada. EXEMPLO:

- Quero alterar a fonte dos títulos das minhas postagens.
No meu template o código que eu preciso se apresenta como: .post h3
.post h3{
font-family: 'comic saans', arial, serif;
}
Agora é só mudar a ''font-family'' padrão do blogger pela ''font-family'' instalada (que se encontra na mesma página que você pegou o código para instalar) veja:
No meu caso então ficou assim:
.post h3{
font-family: 'Great Vibes', cursive;
}

Este foi apenas um exemplo pra vocês entenderem, ok?
Bye Bye ~~

70 comentários :

  1. Como sempre, arrazando nos tutoriais Jackie!

    Beeeeeeeejos

    #Nhaaaaaaac >>> http://the-lovers-world.blogspot.com/

    ResponderExcluir
  2. Own Amei o tuto, vou tentar.. Seu blog me surpreende e muito...


    !!

    ResponderExcluir
  3. Perfeito Jackie!!
    Eu ia fazer um sobre fontes (eu faço quase assim como vc explicou rs).

    Adorei ♥

    bjãoo

    ResponderExcluir
  4. Ameii Jackie! !
    Aki vc so posta coisas legais ,
    Amo seu blog!!
    bjs Mari

    www.mundodebolinhas.com

    ResponderExcluir
  5. Oi! !Adorei seu blog! Seguindo! Se quiser da uma passada la no blog!
    Um abraço!

    http://dicasblogspot-db.blogspot.com.br/

    ResponderExcluir
  6. Eu já usei uma vez o site, no próximo layout irei ver se faço (:

    Anna - World-cutest.tk

    ResponderExcluir
  7. Adorei adorei adorei tava precisando mesmo de um tutorial assim! Faz um tuto de como se instala fontes pra título da postagem, gadget (acho que é assim) e por aí vai *---*

    http://hoot-and-cold.blogspot.com.br/

    ResponderExcluir
  8. Muiito bom. Sempre tinha essa dúvida quando ia montar meus templates :)
    --------------------------------------------
    www.bugigangazdanet.blogspot.com

    ResponderExcluir
  9. ahhhh to morta de curiosidade e não encontro meu celular kkk (meu baby pegou e vai saber onde ele deixou...ai ai),quero saber oq vc escreveuuuu kkk

    bjãoo

    ResponderExcluir
  10. Tem tag pra você no blog!
    ->by-jade.blogspot.com

    ResponderExcluir
  11. Aprendi essa "técnica" quando fui fazer meu primeiro layout, aí usei pra trocar a fonte do título do post e dos gadgets.
    Só acho que, quando a gente instala as fontes, elas deveriam ficar disponíveis no Designer de Modelo e na área de postagem também, pra gente usar quando quisesse sem ter que mexer no HTML. Mas aí era querer demais, né HAUHEUAHUEHAU :p

    Pena que fontes diferentes pesam um pouco o carregamento do blog, por isso é bom a gente não abusar delas, rs.

    muggle-world.blogspot.com

    ResponderExcluir
  12. Adorei o tutu bem útil!Deixa sempre com cara mais bonita o blogger!Beijos *-*
    O blog está de cara nova visita lá!
    http://www.cotidianodeumabarbie.blogspot.com.br/

    ResponderExcluir
  13. Gostei do tutorial,eu não sabia que podia fazer isso no blog.
    http://i-teenbr.net.tc

    ResponderExcluir
  14. Muit legal esse tuto! ;)) ja usei da um charminho coma letra arrumadinha haha ><
    bonequinhadeluxo10.blogspot.com

    ResponderExcluir
  15. brigada jackie, vc tb e um amor =)
    adorei esse post, ja tu instalando :)

    http://xicablog.blogspot.pt/

    ResponderExcluir
  16. Amei Jackie! Muito obrigada,eu tavo precisando muito! :k:

    ResponderExcluir
  17. Muito bom esse tutorial, adorei!!!
    Bjinhos

    www.jeitinhofemininoblog.com

    ResponderExcluir
  18. Ótimo tutorial como sempre Jackie!

    *---*

    Bom domingo!

    BjO
    http://the-sook.blogspot.com.br/

    ResponderExcluir
  19. Ah mais não achei o código :i:
    Depois vou tentar com mais calma
    Uma semana ótima pra ti!
    Bjão, fica com papai do céu ;*

    Garota Imperfeita

    ResponderExcluir
  20. meu comentario não tem nada relacionada o post
    acima!
    gostaria de pedir sera que poderia posta dicas site hospedagem de arquivos

    ResponderExcluir
  21. :j: eu fiz! Ficou ótimo! Obrigada.
    www.batomdeframboesa.blogspot.com

    ResponderExcluir
  22. heey jackie, quando eu enviar o meu modelo vc tb pode compor outra coisa? -eu tenho google chrome e internet explorer- meu plano de fundo de mensagens ficou transparente e eu já tentei mudar para branco mas aquilo nao mudou. obrigada pela oferta de ajuda, claro que aceito!
    diga-me o seu e-mail para lhe enviar.

    http://xicablog.blogspot.pt/

    ResponderExcluir
  23. Oi linda tudo bem?
    Adorei o seu blog estou seguindo:l:

    ResponderExcluir
  24. Jackie , me tire uma duvida ... Como Faço pra Deixaro titulo do post Maior , Ja usei o Editor , & fui pelo html e nada ,
    A outra questão é ( tem como tirar o efeito dos marcadores ( eu não achei legal nele ) ! beeiijãoo

    www.girllsweett.blogspot.com.br

    ResponderExcluir
  25. Obrigada Jackie , me salvoou s2'

    Beeiijinhus!

    ResponderExcluir
  26. :i:

    eu estou muito sem graça ,mas gostaria de te perguntar se você não podia fazer um layout mais ou menos pro meu blog pf me responde

    email:diariodeumagarotacomum@gmail.com

    www.simplesmenteraphaella.blogspot.com

    ResponderExcluir
  27. Como coloca as fontes novas nas postagens ?

    Passa lá no meu blog http://forgirls09.blogspot.com.br/

    ResponderExcluir
  28. Oi Jackie , tentei um dia inteirinho por uma fonte no blogguer e não consegui de jeito nenhum , a fonte que eu quero estalar é um pouco diferente dessa que vc tem , ela tem duas aspas

    já tô deseperada se puder me ajuda? http://licia-carla.blogspot.com.br/ bjs

    ResponderExcluir
  29. Ai que bom que me respondeu , é assim estou editando um lay pra uma amiga minha , ela tem um blog de makes , achei que a fonte dancing é a cara do blog que tô fazendo (que por acaso estou usando uma base que achei no jd ok?) mas já tentei de todas as formas por a fonte e não consegui , estou fazendo em um blog de testes .


    sobre essa .post h3 , não acho no template de jeito nenhum!!! Eu quero por essa fonte nos títulos de posts e de gadgets (eu falo pra caramba né?) se puder me ajudar , nem sei como agradecer bjs

    ResponderExcluir
  30. Consegui na boa!!! Vê as maravilhas dos meus blogs:
    docas-games.blogspot.com
    danilubi.blogspot.com
    bibis-m-o.blogspot.com
    sala-destudo.blogspot.com

    ResponderExcluir
  31. Consegui na boa!!! Vê as maravilhas dos meus blogs:
    docas-games.blogspot.com
    danilubi.blogspot.com
    bibis-m-o.blogspot.com
    sala-destudo.blogspot.com

    ResponderExcluir
  32. Respostas
    1. o meu ficou com a fonte minúscula, seria ideal se a Jackie pudesse ensinar como aumentar a fonte. No meu ficou horrível, vou ter que me contentar com as fontes do Blogger mesmo.

      Excluir
    2. guria pra aumentar a fonte é só achar perto do código que vc alterou a fonte algo como:

      font-size: 45px;

      daí vc só altera o número

      não coloquei no tutorial pq é algo muito simples que não tinha necessidade :c

      Excluir
    3. Jackie me ajuda,num intendo o google web fonts não quer abrir de jeito nenhum,e a única forma é por aii,o site não abrii,me ajuda por favor!
      Queriia então te colocar como administradora só pra fazer isso pra mim :/
      responde:simples-garotaa.blogspot.com

      Excluir
    4. O site tá abrindo normal aqui ? '-'

      Excluir
    5. Acho que é algum problema no meu pc,vou
      tentar fazer isso em outro computador,obrigado mesmo
      assim.

      Excluir
  33. Consegui, como sempre arrazando nos tutoriais, um beijo e ótimo dia pra voce lindona;

    Dá uma olhadinha :
    http://nosnopc.blogspot.com

    Bjuuuuus !

    ResponderExcluir
  34. Oiie Td Bem , Como Que Vc Coloca Esssas Menininhas ↑ ai emcima , para as pessoas colocarem nos comentarios tipo ( :a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:)beijo e ótimo dia pra voce lindona;

    ResponderExcluir
  35. @FC LUAN SANTANA UM BEIJO SPhttp://isjackiezzdream.blogspot.com.br/2011/08/cute-emoticons-nos-comentarios.html

    ResponderExcluir
  36. Eu consegui, mas á letra ficou MINÚSCULA!!! Como aumenta???

    ResponderExcluir
  37. @Anônimo perto da área que vc mudou a fonte procure algo como

    font-size: 26px;

    ai vc só modifica o número!

    p.s coloquei um numero exemplo ai, provavelmente será outro (:

    ResponderExcluir
  38. Adoreei! Tô usando Ei, sabia que esse seu tutorial foi o primeiro a aparecer no google pra mim? Parabéens ahhaha
    Beijos,
    --> siimsenhorita.tk

    ResponderExcluir
  39. :e: Me ajuda Jackie hauss como faço pra saber qual o nome daquele negócio que no seu é .post h3 ?

    ahusahs

    http://cuteland-oficial.blogspot.com.br

    ResponderExcluir
  40. Oi Jackie, me ajuda?

    Tipo, minha fonte é essa:
    font-family: 'Spirax', cursive;

    Onde eu colo? Me ajuda pf..

    http://cuteland-oficial.blogspot.com.br/

    ResponderExcluir
  41. Onde fica o código?Nao achei...
    :i:
    Bjos
    vida - de - cupcake. blogspot. com
    *tire os espacos*

    ResponderExcluir
  42. :i: Jack eu não consegui.

    ResponderExcluir
  43. ameii o tutu mais não consegui :(

    :l:

    diquinhasdajulinha.blogspot.com

    ResponderExcluir
  44. Eu fiz tudo direitinho mas não deu :n:

    ResponderExcluir
  45. Err, Jackie, tô com um probleminha... Tipo, eu usei um tutorial, acho que daqui mesmo, para personalizar o título dos gadgets. Daí, acima de já tem uma url de uma fonte do google/webfonts. Então, quando eu coloco, nada é alterado ._. Socorro!
    -> dreams-in-vain.blogspot.com.br ( está em construção, não repara)
    Beijos!

    ResponderExcluir
  46. Fiz isso no meu blog coloquei no font-family abaixo do bg. Daí a fonte do titulo dos posts e do post por completo e da sidebar tbm mudaram!!!! Socorrr não era p/ muda a da postagem e da sidebar !!! HElPPP

    ResponderExcluir
  47. super legal este post, bem explicadinho :)

    ResponderExcluir
  48. o meu no encontra o .post h3{
    como faço?

    ResponderExcluir
    Respostas
    1. Era só um exemplo!

      Você tem que encontrar os lugares que quer modificar as fontes do seu blog entendeu?

      Excluir
  49. Passem no meu blog! http://dicasdecds.blogspot.com.br/

    ResponderExcluir
  50. Oi Jackie, eu fiz exatamente o que você explicou tudo perfeitamente, e não mudou nada :( e essa não é a primeira vez. Da uma olhadinha no meu blog, eu nem tirei o código!

    http://wrosachoque.blogspot.com

    ResponderExcluir
  51. Deu certo, obrigada *-*
    www.amoraoprimeirorimel.blogspot.com

    ResponderExcluir
  52. Por favor, você pode me ajudar? Eu instalei, mas na postagem principal não consigo fazer aparecer, só quando clica no título dela na outra página aparece...porque será??
    dá uma olhada, www.vivaverdevivabem.blogspot.com
    obrigada bjo

    ResponderExcluir
    Respostas
    1. segue esse tutorial aqui>>http://isjackiezzdream.blogspot.com.br/2012/08/personalizando-o-titulo-das-postagens.html

      Excluir
  53. Olá! Como vocês colocou a imagem de fundo somente no topo do blog?

    ResponderExcluir
    Respostas
    1. Então, usei um tutorial do Trechy teen que está fechado no momento.
      Logo que abrir mando aqui pra vc ;D

      Excluir

.