Blogosfera

Cufón: usando qualquer fonte no seu blog

Oi pessoal!
Já tinha ensinado aqui no blog como usar fontes do Google Web Fonts, que é o método mais simples, porém, através dele ficamos limitados apenas às fontes que o site oferece e, apesar de ter muitas opções, nem sempre encontramos a fonte perfeita.

Nesse tutorial vou ensinar um método chamado “Cufón”, é um pouco mais avançado, mas com ele é possível utilizar qualquer fonte que te der na telha, basta ter o arquivo dela.

Comousarqualquerfontenoseublog1

Vamos começar? Emoji9

  • 1 – Faça download da fonte que deseja usar. Existem milhares de sites pra download de fontes, é só pesquisar no Google. Algumas opções:

http://www.netfontes.com.br/
http://www.1001freefonts.com/
http://www.fontspace.com/
http://www.fontsquirrel.com/

 

Comousarqualquerfontenoseublog2

Não altere nada além do que foi especificado na imagem acima.
No campo “escreva o endereço do seu blog”, coloque o blog em que você deseja usar a fonte, assim ela só funcionará nele. Preencher esse campo é necessário pois algumas fontes só funcionam assim.

 

No fim da página, siga:
Comousarqualquerfontenoseublog3

 

Comousarqualquerfontenoseublog4

 

  • 4 – Você receberá um e-mail assim:

Comousarqualquerfontenoseublog5

 

  • 5 – Cole o código a seguir no HTML do seu template logo abaixo de <head> e substitua:

– O trecho em azul pelo código de onde você quer que a fonte escolhida apareça. Por exemplo, no título do post seria “.post h3”, no título do widget seria “.sidebar h2”.
Atenção: Essa parte vai variar de template pra template. Você precisa descobrir os códigos corretos no HTML do seu template.

– O trecho em vermelho pelo link copiado do seu e-mail no passo 4.

<script src=”http://yourjavascript.com/378481182/cufon-yui.js” type=”text/javascript”/>
<script src=”COLE-O-LINK-AQUI” type=”text/javascript”/>
<script type=”text/javascript”>
Cufon.replace(“.post h3, sidebar h2“, {hover: true});
</script>

 

Gostaram? Eu sempre uso esse método e sou fã! Espero que dê certo pra vocês também, qualquer dúvida deixe nos comentários.

Um beijo! Coracao1

About Author

Designer na Inlove Design e artesã na Contém Fofura. Geek, metida a artista e ama coisas fofas.

15 Comments

  • Gabriela Rocha
    9 agosto 2014 at 1:40

    Quem visita o meu blog não consegue ver a fonte do jeito que coloquei não :(

    Reply
    • thais
      24 dezembro 2014 at 20:40

      no meu tambem nao! só vejo quando clico em “vizualizar blog”

      Reply
      • Whênia
        27 abril 2015 at 19:51

        Nem no meu :( só eu vejo ela, porque só eu tenho baixada. Mas por outro computador, não funciona!

        Reply
  • Anna Julia Bernardo
    9 agosto 2014 at 10:28

    Bom eu tentei na primeira vez mas deu erro acho q é por causa das “,mas vou tentar mais uma vez

    Reply
  • thais
    24 dezembro 2014 at 20:36

    A fonte mudou no titulo da postagem mas nao nos gadgets, porque? :(

    Reply
  • Nay
    7 abril 2015 at 12:01

    Não deu certo comigo :S

    Reply
  • liziane bortolatto
    23 abril 2015 at 22:43

    Não deu certo comigo, fiz tudo certinho. :/ porque sera??

    Reply
  • Diwlay
    17 setembro 2015 at 9:26

    HELP! Faço tudo normal, até salva. Porém, a fonte não muda. No meu blog, a fonte que tenho é a mesma que a sua e quero permanecer com ela mas trocar o layout… Ajuda! :'(

    Reply
  • Vivianne
    18 dezembro 2015 at 21:10

    Depois que extraio o arquivo, escolho para poder salvar e da erro, não consigo com nenhuma fonte. Devo estar fazendo algo muito errado, que raiva!

    Reply
    • Karoline
      20 dezembro 2015 at 12:43

      Você deve estar esquecendo de marcar algum campo obrigatório :)

      Reply
  • Cinthia Rafaelle
    3 janeiro 2016 at 4:30

    Oi Karol!
    Bem, até ai eu entendi, o que eu quero saber é como usar essas fontes nas postagens e não nos títulos.
    Agradeço a resposta!

    Reply
  • isabela
    12 agosto 2016 at 19:35

    o meu template é petit formal, eu peguei aqui no seu blog. não to conseguindo achar o código.. ce sabe me falar qual é?

    Reply
  • Camila
    25 setembro 2016 at 18:26

    Gente, pra quem está dizendo que a fonte não funciona, eu vou dar uma dica que funcionou comigo:
    Além de inserir o código que a Karoline deu neste tutorial, acrescente o trecho: font-family: ‘NOME DA FONTE’; no código que vocês querem que a fonte apareça.

    Exemplos:

    body {
    font-family: ‘Sophia’;
    }

    .post h3 {
    font-family: ‘Sophia’;
    }

    .sidebar h2 {
    font-family: ‘Sophia’;
    }

    A fonte só funcionou comigo quando acrescentei esse trecho no CSS. Experimentem e vejam se funciona com vocês também. ;)

    Reply
  • Bruno
    25 março 2018 at 21:35

    Olá Karoline, tudo bem?
    Estou precisando de uma ajuda, ver se você sabe, por favor.
    Eu usei a um tempinho o CUFON para fixar fontes em sites que desenvolvo, porém parece que foi descontinuado. Sabe me dizer como fazer? Ou se existe outra forma?

    Agradeço muito se puder me ajudar!
    Bruno

    Reply
    • Karoline
      26 março 2018 at 15:57

      Oi Bruno, eu uso font-face agora. :-)

      Reply

Leave a Reply