24 junho 2012

Como usar qualquer fonte no blog


Já pensou em usar a mesma fonte do cabeçalho nos títulos dos posts ou em qualquer outro lugar do blog? Sim, é possível usar qualquer fonte que você tenha no computador em seu blog. Isso é possível graças ao cufon, um site que gera o script de qualquer fonte. Hoje você vai aprender a usá-lo aqui no CB.
Eu uso aqui no blog e nunca tive problemas, a única desvantagem é que pesa um pouquinho a mais no layout, mas não é muito diferente do google web fonts.

O primeiro passo é escolher a fonte. Você pode baixar uma nova ou usar uma fonte que você já tenha instalado no seu PC. Se for usar uma fonte que já tenha, siga os passos a seguir:

1- Clique no menu inciar (aquele botãzinho com a logo do windows) > Painel de controle.
2- Cliquem em "aparência"

3- Clique em "Fontes" e procure pela fonte que você quer usar.

4- Quando achá-la, clique nela com o botão direito, e depois clique em "copiar"
5- Cole a fonte em um lugar que fique fácil de achar depois.





USANDO O CUFÓN

2- Clique no primeir botão "escolher arquivo" e procure pela fonte que deseja usar

3- Marque a seguinte opção:

4- Depois marque apenas as opções que estão marcadas na imagem abaixo:

5- Desça a página até o final, marque a opção mostrada na imagem e depois clique no botão "Let's do this"

6- Vai iniciar um download do arquivo javascript da sua fonte. Aguarde o download terminar e prossiga para o próximo passo.

7- Agora você deve hospedar este arquivo. Se você tem conta no tumblr, pode ir aqui. É só selecionar o arquivo, clicar em upload, e copiar o link que aparecer. Se você não tem conta no tumblr pode hospedar no google docs ou em outro site que conheça. O importante é salvar o link do arquivo hospedado em algum lugar. Precisaremos dele no próximo passo.

8- Vamos finalmente para o html do seu blog. Cole o código abaixo antes de <head>
 <script src="http://static.tumblr.com/y66747w/Bizly9fno/dropbox.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/y66747w/QKkly9fg0/cufon.js"></script>
<script type="text/javascript" src="Coloque aqui o link do arquivo que você hospedou"></script>
<script type="text/javascript"> Cufon.replace('Objeto 1');
</script>
Substitua no local indicado pelo link do arquivo gerado pelo cufón. Em Objeto 1, você irá colocar a id de onde você quer que a fonte seja alterada. Por exemplo, se você quiser que a fonte diferente fique no título dos posts, você coloca ('h3'). Pode colocar quantos objetos quiser por exemplo:
<!--[if lt IE 9]>
<script src="http://static.tumblr.com/y66747w/Bizly9fno/dropbox.js"></script>
<!--![endif]-->
<script type="text/javascript" src="http://static.tumblr.com/y66747w/QKkly9fg0/cufon.js"></script>
<script type="text/javascript" src="Coloque aqui o link do arquivo que você hospedou"></script>
<script type="text/javascript"> Cufon.replace('h3') ('.sidebar h2') ('.post blockquote');
</script>

9- Não precisa substituir mais nada, a fonte irá mudar automaticamente ^^

Espero que tenham gostado, agora já podem desenjoar do google web fonts! Desculpem pelas tags gigantescas nas imagens, é que esses tempos o plágio tá cada vez pior :$
Não esqueça de creditar.
Kissus, Liah

95 comentários:

  1. Bem útil lia, mas demora para carregar se o arquivo for muito e isso impede o carregamento do teu blog em alguns navegadores!

    ResponderExcluir
  2. Eu amei o tutorial! Amei mesmo, agora posso colocar as fontes que eu mais amo ^^

    Liah és um anjinho >.<
    http://paradise--days.blogspot.com.br/

    ResponderExcluir
  3. Amei o tutorial,muito útil.
    lifeonalin.blogspot.com.br

    ResponderExcluir
  4. Nunca imaginei que fosse tão simples (:
    http://magic--teens.blogspot.com.br/

    ResponderExcluir
  5. Muito útil, pq as vezes agente acha uma fonte tão lindinha e não consegue colocar no blog..
    bjoos

    mundoodasblogueiras.blogspot.com.br

    ResponderExcluir
  6. Sempre que eu tentei coloca alguma fonte no meu layout nenhuma deu certo vou tenta com esse tutorial ^^

    http://gobelezando.blogspot.com.br/

    ResponderExcluir
  7. Amei o tuto Liah!

    Passa lá? 4-Brownies.blogspot.com :)

    ResponderExcluir
  8. Adorei o tuto,nunca tinha tentado desta forma
    =D
    ate mais
    bjkz'
    http://rebiteseflores.blogspot.com.br/

    ResponderExcluir
  9. Adorei o tutu, personalizar o blog eh tudo de bom... beijinhos! camilaejustin.blogspot.com

    ResponderExcluir
  10. Lia!! Que tutorial perfeito!
    Vai me ajudar muito!! Obrigada!
    http://popcoorn-doce.blogspot.com.br/

    ResponderExcluir
  11. Deve dá um efeito super diferente no blog. Bem legal o tuto! Bjs, Stardolleiras

    ResponderExcluir
  12. O Cufon é simplesmente perfeito *----*
    Eu acho ele beeeeem melhor do que o Web Fonts, porque posso usar qualquer fonte que quiser :)

    http://blog-sweetpoison.blogspot.com/

    ResponderExcluir
  13. Adorei o tutorial *-* Muito útil, com certeza vou usar no próximo lay do blog!

    Kissus ----> Blog Bola de Chiclete.com

    ResponderExcluir
  14. Liah, minha rainha \o/ Obrigada por ter feito o tutorial que eu pedi. Vou fazer agora no meu blog! Espero que dê certo, ah, e vou creditar. Obrigada mesmo, vai me ajudar muito! Você arrasando seeeeeeeeeempre.

    http://onthefame.blogspot.com.br/

    ResponderExcluir
  15. Ótimo tuto!! Indiquei seu blog no meu!!^^! Um abraço!!
    ~> dicasblogspot-db.blogspot.com

    ResponderExcluir
  16. Gostei, só não vou mudar não, ta bom assim ;)
    http://omeubrilhantemundo.blogspot.com.br/

    ResponderExcluir
  17. Nossa, que legal, amei<3
    Adoro demais aqui, já está no meu blogroll, sabia?
    Seguindo* bjs -> imnanda.blogspot.com

    ResponderExcluir
  18. Eu já tinha ouvido falar no Cufon, até tinha procurado um tutorial sobre como usar, mas não tinha achado nada que estivesse bem explicadinho. E o seu tuto tá bem fácil de entender, vou tentar usá-lo no meu blog.
    O ruim do Google Web Fonts é ele não parece ter uma variedade maior de fontes (eu acho)...
    Beijos!
    http://elfadophotoscape.blogspot.com.br/

    ResponderExcluir
  19. Muito útil! Amei mesmo! Beijos Liah,
    http://wronggirl-ann.blogspot.com.br/

    ResponderExcluir
  20. Esse tutorial ajuda de verdade, tira toodas as dúvidas!

    www.notsosweetblog.blogspot.com

    ResponderExcluir
  21. Oiii :D o meu mais novo post estamos conversando sobre quartos e suas bagunças, dá uma passada lá. Estou passando varias dicas para você que tem quartos bagunçados.
    http://brendacurty.blogspot.com.br/2012/06/bagunca-x-quartos.html

    Beijo :*

    ResponderExcluir
  22. Incrível,Arrazou! o tutorial dos sonhos,se realizou! eu já estava esperando por isso ah um tempão! obrigada :)
    geinmars.tk

    ResponderExcluir
  23. Oii Liah!! Muito legall... Amo, amo, amo teu blog!! Beijinhos carinhosos!
    www.mundofashion-sara.blogspot.com

    ResponderExcluir
  24. Vou fazer isso no meu blog x3
    Tenho uma fonte linda e quero usar lá tbm!!! Adorei o tutorial!
    Beijus<3
    http://reinokawaii.blogspot.com

    ResponderExcluir
  25. Tava procurando esse tuto faz tempo Liah! Até tinha achado em outro blog, mas não funfou... Vou tentar uma hora!

    Kissus!
    http://goimagines.blogspot.com.br

    ResponderExcluir
  26. Obrigada pelo tutorial. Deu pra entender tranquilo. Nem imaginei que fosse tão fácil ;D

    ResponderExcluir
  27. AMEEEEEEEEI O TUTORIAL!
    Vou usar qdo der!

    Você poderia seguir o blog da minha amiga que está começando agora, e conhecer o trabalho dela? eu ficaria muito grata! http://izabellagraphics.blogspot.com.br/

    bjos!

    ResponderExcluir
  28. Apliquei esse tuto já *-*

    Ah, e eu neem acredito que VOCÊ comentou lá (desmaiei)!
    ummilkshake.blogspot.com

    ResponderExcluir
  29. Oh my, eu sempre quis fazer issooo, ter sempre que pegar aquelas fontes do Google Fonts é muito chato!
    Vou usar no meu próximo lay com certeza!
    Rebel Cinderella

    ResponderExcluir
  30. Oi Liah! Que tutorial mais útil! Nunca tinha visto em outro blog. Com certeza irei tentar fazer, e tomara que dê certo.
    O seu lay é tão perfeito, flor! hahah Parabéns =)
    Beijinhos, momamoraes.blogspot.com

    ResponderExcluir
  31. ameei o tutorial , estava precisando rs. obrigado pela visita lá no blog , beeijinhos.

    http://looking-the-stars.blogspot.com

    ResponderExcluir
  32. Adorei o tutu, vou usar claro *-*

    http://garotamarte.blogspot.com.br/

    ResponderExcluir
  33. Estava exatamente procurando isso para fazer um template free que estou preparando.
    Liah, queria saber como você conseguiu tirar os seus comentários do disqus e colocá-los novamente no blogger, pois estou querendo voltar para o sistema de comentários do blogger e não quero perder meus comentários. Desde já agradeço.

    http://giuliasplace.tk/

    ResponderExcluir
  34. Adorei!Vou usar depois nos meus layouts,estava louca atrás disso!Adália,estamos com um concurso muito legal,pode perticipar?É super simples,esse é o link:
    http://garotateenoficial.blogspot.com.br/2012/06/especial-ferias-de-julhodivulgue-seu.html?showComment=1340718310515#c2430271050159081242

    ResponderExcluir
  35. Legal , é bem facil msm ! *-* Parabennz , seu blog é demais !
    te seguiindo *u* Bjus :**
    ~~ http://fc-harry-potter.blogspot.com.br/ ~~

    ResponderExcluir
  36. Me ajudou muito !
    http://karolsatelespink.blogspot.com.br/

    ResponderExcluir
  37. uooooooooouuuuuuuuuuuuu
    Queria muito saber esse tuto ja que criei im novo blog, >.<
    novo blog=>>http://mundode-otakus.blogspot.com.br/
    kissus,Sam
    http://magaligirls123.blogspot.com.br/

    ResponderExcluir
  38. Meu Deus lyah são muitos passos a serem seguidos , eu me confudo toda >< ! por enquanto estou usando a do blogger mesmo mais é bom saber como faz né vai vai que preciso , essas fontes diferentes dão um toque no blog :))
    http://guidymania.blogspot.com.br/

    ResponderExcluir
  39. Eu vou no Word mesmo!
    http://ladyalen.blogspot.com

    ResponderExcluir
  40. Aam... O Cufin não está abrindo =/

    ResponderExcluir
  41. Érr...eu fiz tudo direitinho, mas quando vou abrir o dowload, dá erro. O que eu faço?

    ResponderExcluir
  42. Liah, e qual é o código pra colocar na postagem ? Eu queria colocar Century Gothic na postagem mais não sei o "Objeto"

    ResponderExcluir
  43. Nossa, ameeei, exatamente o q eu tava procurando *.*
    Tô fazendo um desing pro meu blog, e como eu não entendo quase nada de HTML, nunca conseguiria sem os tutoriais do Cherry Bomb, muito obrigada Liah!!!

    ResponderExcluir
  44. obrigada, você está me ajudando muito *-*

    ResponderExcluir
  45. Eu gostaria de usar a fonte em todo o blog mas não sei como. Ajuda?

    ResponderExcluir
  46. Muito bom o tutorial, funcionou direitinho. Muito obrigada, e parabéns pelo lindo blog! <3

    ResponderExcluir
  47. Por que será que só eu não consegui?

    ResponderExcluir
  48. deixe um comentário no encartes.blogspot.com me explicando melhor um pouco a parte do html!

    ResponderExcluir
  49. Oi liah td bem não entedi a parte de hospedagem e não deu certo em meu blog já li e reli tutorial de cima abaixo poderia me ajuda?

    ResponderExcluir
  50. Nyaaaan eu não consegui!!! ><
    Eu já li e reli mais não sei porque eu não consigo tipo no meu HTML não tem script não consigo achar em lugar nenhum!!!!!
    PS: O tutorial tá incrível super fácil de entender só eu que sou baka mesmo!!! ><

    ResponderExcluir
  51. Oiii! Só queria te avisar que, infelizmente, alguém te plágiou, dá uma olhada nesse link:http://mundinho-dos-blogs.blogspot.com.br/2012/08/como-usar-qualquer-fonte-no-blog.html

    ResponderExcluir
  52. Ah, também te plagiou aki: http://mundinho-dos-blogs.blogspot.com.br/2012/08/personalize-area-dos-comentarios-tags.html#comment-form

    ResponderExcluir
  53. Tem como reverter isso aqui????

    The file you uploaded could not be converted. Currently only TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts are supported.

    If you're sure the font is valid, it is likely that the author of the font has decided to not allow modification and/or embedding of the font. This can happen quite often especially with "freeware" TrueType fonts. You must contact the author of the font for a less restricted version.

    Some files (especially old Mac PostScript fonts) require pre-processing that cannot be done on the server. For more information please read Trouble with font files.

    ResponderExcluir
  54. Turitorial otimo! Procuro isto á tempos e gostei muito do modo de funcionamento do script, embora as fontes sejam carregadas como
    imagem...

    ResponderExcluir
  55. Usei seu tutorial e deu tudo certo... Só tem um probleminha que eu não consigo arrumar... Quando eu clico no título do post, a fonte diminui absurdamente! Já tentei arrumar de tudo quanto é jeito mas não to conseguindo! ):

    ResponderExcluir
  56. Esse tutorial é exclusivo seu, ninguém consegue fazer melhor, ajudou muuuuito!!
    Naum entendo esse pessoal que te plagia!!
    Visitaa se quiser ver o resultado:
    rascunhosdecaneta.blogspot.com (Desde 16/09/12)

    ResponderExcluir
  57. Não achei o cufon da erro :(!!
    Que pena achei uma fonte tão linda no meu pc

    ResponderExcluir
    Respostas
    1. entra no inicio do site http://cufon.shoqolate.com/

      Excluir
    2. Estava com o mesmo problema e ajudou, obrigada. ><

      Excluir
  58. Liah quando eu entro pra fazer o download ele da erro!! :'(

    ResponderExcluir
    Respostas
    1. Pois é, meu blog iniciante e gostaria que ajudem nós duas Liah, por que da erro? Ajude!!

      Excluir
    2. Liiiah,o meu tambeiim ta dando erro no dowload aparece:
      Cufon não definido,erro,toda hora! Ajuda preciso desse tutorial!

      simples-garotaa.blogspot.com

      Excluir
  59. Sucesso esse tuto, Liah. Muito obrigada! Gostaria aproveitar e te parabenizar pelo blog. Fico feliz em ver gente nova e criativa como vc! Me lembra qd eu era adolescente e blogueira. Com a vida corrida, tive q parar, mas depois de quase 10 anos, finalmente to voltando na blogosfera. Um beijao e sucesso!

    ResponderExcluir
  60. http://garotasqcurtemanime.blogspot.com.br/

    Visita meu blog?

    ResponderExcluir
  61. Que raiva, o google web fonts nem esse cufon abrem.

    ResponderExcluir
  62. Baaaaah, eu fiz e deu certo, só que depois de um tempo, a letra voltou ao normal, o que faço? :(

    Obg

    ousadateenblog.blogspot.com.br

    ResponderExcluir
  63. Adorei e consegui fazer. Obrigada Liah,

    Beijos

    http://entrelinhaseabobrinhas.blogspot.com.br/

    ResponderExcluir
  64. Ahhhhhhhhhhhhhhhhhhhhhhhhhhhhh..................... não creio que consegui! eu sou f*da ~le doidona~

    ResponderExcluir
  65. O cufon não está abrindo aqui... O-o

    ResponderExcluir
  66. como aumento a fonte? tá muito pequenininha

    ResponderExcluir
  67. Amore, faz diferença ser um layout customizado do blogger ou um layout exclusivo? Fiz tudinho, mas nada mudou, amei seu tutorial, mega explicado, parabéns!!!!

    ResponderExcluir
  68. Não consigo escolher a fonte e colocar no meu blog...acho que tem algum problema com a configuração do meu HTML...
    leticiaglow.blogspot.com.br

    ResponderExcluir
  69. Este comentário foi removido pelo autor.

    ResponderExcluir
  70. gente colocar a fonte foi fácil mais como que a gente faz pra ajustar o tamanho e a cor da fonte do titulo dos posts ???

    fiz tudo direitinho e deu certo mais quando fui ver a fonte tinha ficado pequena e somente com um cor sendo que antes tinha uma cor a mais qdo se passava o mouse em cima


    ---
    Parabens esse site é sem duvida o melhor de todos que eu já vi!!! facilitou minha vida ! ^^

    http://www.blogdajuliace.com/
    construido com a ajuda de vcs :)

    ResponderExcluir
    Respostas
    1. Nem a fonte consegui colocar não consigo pegar o abençoado link da fonte

      Excluir
  71. Muito bom o tutorial, muito bom mesmo.

    http://mundodeliina.blogspot.com.br/

    ResponderExcluir
  72. Oii quero muito mudar a fonte do titulo do meu blog por uma que o blogger não tenha disponibilizado e eu vi seu tuto mas não entendo nada desse códigos e me perco toda por favor leia esse comentário e me ajude Help!!
    http://resourcesdark.blogspot.com.br/ < Meu Blog

    ResponderExcluir
  73. O tuto é maravilhoso, mas o problema é que eu não consigo mudar a cor, nem colocar em negrito. alguém pode me ajudar?

    ResponderExcluir
  74. como eu altero o tamanho?
    www.garota-inflamavel.blogspot.com

    ResponderExcluir
  75. conssegui alterar,mais qual o codigo para por a fonte nas paginas do blog tambem???

    ResponderExcluir
  76. O meu tb não deu certo na hora de salvar.

    ResponderExcluir
  77. Não consegui :s n deu certo na hora de salvar!

    ResponderExcluir
  78. Esse é o melhor tutorial de todos que eu ví até hoje!
    Muito obrigada mesmo. <3

    ResponderExcluir
  79. Qual o "Objeto" para o Cabeçalho do blog ?

    ResponderExcluir
  80. Amei, conseguir modificar a fonte do meu blog !

    Obrigada

    ResponderExcluir
  81. Por favor, me ajudem! Já tentei de tudo para mudar a fonte do meu blog mas não da! Uso um template, mas acho q n tem nada a ver com ele :( eu não sei o que está acontecendo, já tentei muuuitos tutorias e nenhum da certo !

    ResponderExcluir

- Leia o post antes de comentar!
- Comentários sem conteúdo serão ignorados.
- Se quiser que eu responda o comentário, deixe o link do seu blog no final do comentário.

Design desenvolvido por Adália Sá com ajuda de: Trechy Teen, Loop infinito, I love themes, Great Help, Font Squirrel e Subtle Patterns.

MyFreeCopyright.com Registered & Protected
Licença Creative Commons