Como utilizar qualquer fonte em sua página com Cufon

Cufon é uma API que tem como função substituir fontes em javascript, o que é uma mão na roda para resolver o problema de fontes utilizadas em seu site, uma vez que bastam dois arquivos e pequenas configurações para deixá-lo redondo.

De maneira rápida e robusta, o Cufon uma solução sem o uso de plugins, possibilitando ainda a liberdade de definir diferentes estilos para o texto substituído, através de CSS.

Vejam na prática como funciona.
clique aqui. O menu lateral foi feito utilizando Cufon.

COMO UTILIZAR?

Primeiramente, é necessário baixarmos o cufon-yui.js, que é quem faz toda a mágica. Basta fazer o download o arquivo no site do projeto ( Opção “Download” do Menu), colocar o arquivo sem seu site e declará-lo:

<pre><script src="cufon-yui.js"></script>

Em seguida, é hora e utilizarmos o gerador, também no site, para que a fonte desejada seja convertida. O gerador criará um arquivo de fonte SVG e salvá-lo em um arquivo JS. Deveremos selecionar a fonte a ser utilizada, selecionar os caracteres a serem usados, recomendável selecionar a opção “All”(Todos), ler os “Terms” e selecionar “I acknowledge and accept these terms” e, por fim, no final da página clicar em “Let’s do this”. Será gerado um arquivo js, faça o download dele.

Nota: A fonte a ser convertida não pode estar na pasta “Fonts”. Copie a fonte para outro local e selecione de lá.

Com o download feito, esse arquivo precisa ser incluído em outro <script> após o Cufon:


&lt;script type=&quot;text/javascript&quot; src=&quot;js/Rockwell_400.font.js&quot;&gt;&lt;/script&gt;

Agora é o momento de substituir o texto desejado. Iremos utilizar a seguinte função:


&lt;script type=&quot;text/javascript&quot;&gt;
	Cufon.replace('h1');
&lt;/script&gt;

Com esta função, o Cufon se encarregará de substituir toda tag h1 de seu site e converter para a fonte declarada.

Podemos trabalhar melhor estas substituições, especificando pontos específicos a serem substituídos. Podemos utilizar para isso Id’s e Classes do Css por exemplo:

&lt;script type=&quot;text/javascript&quot;&gt;
	Cufon.replace('#id');
        Cufon.replace('.classeCss');
&lt;/script&gt;

Dessa maneira, a substituição deixa de ser em todo o documento, e passa para os campos desejados.

Além disso o Cufon possibilita a substituição de mais de uma fonte, como no exemplo:

&lt;script type=&quot;text/javascript&quot;&gt;
	Cufon.replace('#id',{ fontFamily: 'Rockwell' });
        Cufon.replace('.classeCss',{ fontFamily: 'Museo 300' });
        Cufon.replace('#id span',{ fontFamily: 'Myriad Pro' });
&lt;/script&gt;

Sempre lembrando que é necessário declarar todos os arquivos js de fontes que serão utilizadas no seu site.

wiliamluis

Deixe sua resposta