Categorias: Tutoriais

Cufón: fontes diferentes

Já tinha feito um outro tutorial explicando como usar fontes diferentes no site/blog com CSS. Mas algumas fontes simplesmente não funcionam bem em alguns navegadores (IE cof cof), quando é feito pelo CSS. Agora vou explicar como fazer isso usando o script Cufón.

Depois que comecei usar o Cufón para clientes não tive nenhuma reclamação de que a fonte não está como deveria. Ele funciona na maioria dos navegadores e até mesmo nas versões antigas do IE.

Funciona assim, você diz qual fonte quer usar e ele transforma ela em script. Depois você chama o script no seu código e configura onde quer que ele aplique aquela fonte. E então no lugar de procurar uma fonte no computador ou servidor, ele usa o script.

Então vamos pegar como exemplo a fonte AUdimat, que é free e você pode baixar ela no SMeltery.
Depois de fazer download dela e descompactar o arquivo zipado em uma pasta no seu computador, note que ela tem 4 arquivos da mesma fonte. Sendo que é uma fonte normal (regular), uma itálica (italic), uma negrito (bold) e uma negrito itálico (bold italic). Nem todas as fontes tem todos esses, algumas tem apenas a fonte regular. Não tem problema nesse caso, o Cufón também aceita só uma.

Depois de notar quantos arquivos tem a fonte e quais são cada um, entre no site do Cufón para gerar a fonte.

No campo Select the font you’d like to use, você vai adicionar os arquivos da fonte, cada qual no seu devido lugar, tem um para regular, negrito, itálico e negrito itálico. Depois marque a opção “The EULAs of these fonts allow Web Embedding (without Adobe Flash)“. Exemplo abaixo:

No próximo campo, Include the following glyphs (if available), é onde você vai dizer o que essa fonte tem e quer usar. Se ela tem acentos, se vai usar caixa alta, números.. eu costumo marcar sempre os mesmos campos para todas as fontes que uso, assim não corro risco de esquecer nada. E não deixo marcado todas as opções, por que quanto mais coisa você marca ali, mais pesado o script vai ficar. Veja abaixo as opções que deixo marcado (pode usar elas sempre):

Lembrando que mesmo que você marque que quer usar números, acentos, caracteres.. ele só irá funcionar se a fonte tiver mesmo essas opções. Ele não faz fonte gerar coisas que ela não tem. Então é sempre bom verificar a fonte que vai usar, se ela permite acentos, principalmente se você pretende usar ela em títulos de posts.

Continuando.. nos outros campos deixe exatamente como está. Apenas na última opção, você precisa aceitar os termos:

Feito isso, clique em Let’s do this!.
Ele vai gerar um script e vai pedir pra você fazer download. Faça-o e salve em uma pasta no seu computador.
No caso da fonte de exemplo que estou usando ele gerou um script com o nome AUdimat_400-AUdimat_700-AUdimat_italic_400-AUdimat_italic_700.font.js e vou renomear esse script para audimat.js para ficar mais fácil na hora de chamar ele no código html do site/blog. Você pode renomear o seu para o nome que quiser (sem acentos, espaços..), e continue com a extensão js.

Agora no site do Cufón mesmo, clique em Download. Está no início da página, onde tem um menu horizontal.
No firefox ele vai abrir uma página com um código enorme, copie todo o código, abra o bloco de notas (ou seu editor favorito), cole o código e salve na mesma pasta do script da fonte com o nome cufon.js.
Já no Internet Explorer, ele vai gerar o arquivo para download, salve ele na mesma pasta do script da fonte e altere o nome do arquivo para cufon.js.

Então temos 2 scripts, audimat.js e cufon.js. Você vai salvar os 2 em uma pasta no seu ftp. Quem usa WordPress, recomendo que crie uma pasta “scripts” dentro da pasta do tema que está usando e coloque eles lá.

Feito isso, vamos chamar esses scripts no html. Abra seu html (header.php para quem usa WordPress) em um editor e antes dessa parte:

</head>
<body>

Adicione o código:

<script type="text/javascript" src="http://seusite.com/cufon.js"></script>
<script type="text/javascript" src="http://seusite.com/audimat.js"></script>
<!-- cufon replace --><script type="text/javascript">
  Cufon.replace('h1',{
  fontFamily: 'AUdimat', //nome da fonte usada
  hover:'true' //permitir mouse hover
  });
  </script><!-- //cufon replace -->

No código acima altere http://seusite.com/ para a url onde está o seu código cufon.js e audimat.js (ou o nome que tenha o seu).
O código depois é onde diz onde a fonte será usada. Então no exemplo acima, tudo que estiver entre h1, usará a fonte AUdimat.

Se quiser que a fonte seja usada em uma id ou class, é só dizer qual, veja outro exemplo:

<!-- cufon replace --><script type="text/javascript">
  Cufon.replace('#menu',{
  fontFamily: 'AUdimat', //nome da fonte usada
  hover:'true' //permitir mouse hover
  });
  </script><!-- //cufon replace -->

No exemplo acima, tudo que estiver na id menu, usará a fonte AUdimat.

Se você quiser em todos h1 e na id menu, você não precisa repetir o código para cada um, basta usar uma vírgula para separar eles, exemplo abaixo:

<!-- cufon replace --><script type="text/javascript">
  Cufon.replace('h1, #menu',{
  fontFamily: 'AUdimat', //nome da fonte usada
  hover:'true' //permitir mouse hover
  });
  </script><!-- //cufon replace -->

Você pode colocar quantos quiser, separando por vírgula. O último fica sem vírgula. Note que todos estão entre aspas simples.

<!-- cufon replace --><script type="text/javascript">
  Cufon.replace('h1, #menu, #sidebar h2, #footer a',{
  fontFamily: 'AUdimat', //nome da fonte usada
  hover:'true' //permitir mouse hover
  });
  </script><!-- //cufon replace -->

Para saber o nome certo da fonte que você está usando, abra o script da fonte (audimat.js no meu caso) em um bloco de notas ou editor que queira, e no início do código você vai ver escrito algo como “font-family”:”AUdimat”. É claro que se você estiver usando outra fonte, o nome dela estará ali no lugar de AUdimat.

Agora um último passo, ainda no seu html, no final dele (footer.php para quem usa WordPress) antes dessa parte:

</body>
</html>

Adicione esse código:

<script type="text/javascript"> Cufon.now(); </script>

Mas esse código acima não pode ficar depois de outros scripts que você tenha ali no final. Ele tem que ficar antes. Então seria assim:

<script type="text/javascript"> Cufon.now(); </script>
<!-- outros scripts -->
<!-- google analytics -->
</body>
  </html>

No final de tudo, seu código será mais ou menos assim:

Enfim.. visualize sua página e veja como ficou.

No seu CSS você vai configurar o h1, #menu ou qualquer outro que queira usar, como sempre fez, só não precisa colocar qual fonte será usada.

Isso tudo também pode ser feito em blogs do blogger, basta salvar os scripts em algum lugar (no dropbox por exemplo) e lá no código do blogger fazer o mesmo processo que expliquei aqui. Também pode usar a mesma ideia para temas no tumblr ou qualquer outro sistema que permita que você altere o código.

Tudo isso que expliquei é o básico, mas ele permite adicionar alguns efeitos na fonte, como gradient, shadow.. mas como é um pouco mais complicado, vou deixar isso para vocês correrem atrás. Podem pesquisar mais no próprio Cufón, lá tem tudo explicado do que é possível fazer.