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.

Postar um comentário

0 Comentários