Estilize seu blog com fontes diferenctes

Antes, para estilizar um título com uma fonte diferente, a solução era utilizar imagens no lugar, porem o site ou blog acaba ficando um pouco  pessado ao carregar no navegador.
Pensando nisso o Google criou o font API oferecendo algumas fontes estilosas para ajudar nessa questão, mas como as opções de fontes são poucas os desenvolvedores Cufón criaram um JavaScript que que permite você inserir a sua fonte escolhida.
A forma como isso funciona eu não sei muito bem, mas segundo a Roseli Zanchetta do bloggersphera, este script "recolhe" os caracteres da fonte escolhida, transforma-os em uma fonte SVG (vector) e depois os converte usando JSON (formato de JavaScript que consegue ler os feeds de seu blog).


Agora vamos ao que interessa.

1_Selecionar o Arquivo da Fonte
Primeiramente, escolha a fonte que você deseja usar para seus títulos.
Lembre-se de que deve ser uma fonte com licença que permita a utilização na WEB (saiba mais em Font Embedding - Fonts and the Law). Salve o arquivo da fonte em seu desktop.

2_ Gerar os arquivos JavaScript
Acesse o gerador no site Cufón. Se precisar, utilize o Tradutor do Google para entender melhor cada campo do formulário.

Depois de preencher o formulário com suas preferências e clicar em "Let's do this!", você receberá um arquivo JS da fonte para fazer download. Salve esse arquivo em seu computador.

Você precisará também de outro arquivo JS para fazer o script funcionar - baixe-o para seu computador através desta página: "YUI-compressed version of cufón".

Hospede esses dois arquivos JavaScript em seu site de hospedagem preferido.


3_ Colocar os JS em seu blog

Agora vamos ao Blogger para colocar a chamada dos JS:

Em Layout -> Editar HTML, salve uma cópia de seu template clicando em "Baixar Modelo Completo". Não é necessário clicar para "Expandir Modelos de Widgets".

Cole o código dentro da tag <head>, acima de <b:skin><![CDATA[/*, como segue:


<script src='http://endereço-de-seu-arquivo/cufon-yui.js' type='text/javascript'/> 
<script src='http://endereço-de-seu-arquivo/Font.font.js' type='text/javascript'/>
  <script type='text/javascript'>
   Cufon.replace(&#39;h2&#39;);
  </script>
    <b:skin><![CDATA[/*

 Coloque os endereços dos seus arquivos JS hospedados.

4_ Evitando problemas com o Internet Explorer
Como em vários hacks, precisamos dar um jeitinho para não ter problemas com o IE. Logo depois do final do seu outer-wrapper, cole o código:

</div> <!-- end outer-wrapper -->
<script type='text/javascript'> Cufon.now(); </script>

 

0 comentários:

Postar um comentário