Cufón es una manera fácil de incrustar fuentes personalizadas en nuestro proyecto.

Hay muchas maneras de incorporar fuentes en un proyecto, Cufón es sólo un método. Dependiendo del proyecto puede resultar util o no

¿Como agregar Cufon a nuestra pagina?:

Primeros pasos

En pocos minutos seguimos los siguientes pasos

• Descargar Cufón
• Generar fuentes Javascript
• Subir al servidor y configurar el codigo
• Usar Jquery para cargar Cufón
• Seleccionar Cufón

Descargar Cufón

Vamos al sitio web de Cufón y descargamos la ultima versión en nuestra computadora y renombramos al archivo cufon.js

Generar fuentes Javascript

Para este tutorial vamos a usar Chunkfive, que podemos obtener libremente de Fontsquirrel. Una vez que tenemos elegida la fuente que vamos a usar(son soportadas fuentes TrueType [TTF], OpenType[OTF], Printer Font Binary [PFB] y Postscript) necesitamos llamarla desde Javascript

Vamos nuevamente el sitio web de Cufón donde vamos a encontrar campos para subir nuestras fuentes. Sigamos las instrucciones, aceptemos los terminos y descarguemos nuestra fuente Javascript.

Subir al servidor y configurar el codigo

Primero tenemos que hacer referencia a nuestro archivo cufon.js y a nuestra fuente en el archivo HTML.

Usamos jQuery para cargar Cufon

Descargamos la ultima version de jQuery desde jQuery

   

Cufon.replace('Replace this stuff!');

Seleccionar Cufon

Ya tenemos configurado el codigo para llamar a Cufon y ahora tenemos que decirle que es lo que tiene que reemplazar. Esto se hace atraves del HTML con clases CSS. En este caso solo lo usaremos para los titulos

Opcion 1: si vamos a reemplazar todos los titulos del proyecto necesitamos hacer que Cufon reemplace todos tags h1,h2,h3,h4,h5. Para esto usamos el siguiente codigo:

$(function(){
    Cufon.replace('h1,h2,h3,h4,h5');
});

Opcion 2: crear una clase (por ejemplo .cufon) que podamos agregar en los elementos que queremos reemplazar. Por ejemplo:

   
     $(function(){
       Cufon.replace('.cufon');
       });
   

  
    
Awesome Cufón Heading
    
Not-so Awesome Heading
  

Vista final

Juntando todo el codigo se ver asi

  






  $(function(){
    Cufon.replace('h1,h2,h3,h4,h5');
   });