Cufón: usando qualquer fonte no seu blog | Follow your dreams
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

Tags : Blogger

13 Comentários

  1. 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! :'(

  2. 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. ;)

Deixe uma resposta