Cufon ha sido una de las herramientas más interesantes con la que me he tomado en estos últimos meses. Con Cufon podemos insertar casi cualquier Fuente en nuestro site con muy poco trabajo.

En este caso vamos a hablar del Plugin para Wordpress, que hará del trabajo de activar Cufon algo muy sencillo de llevar a cabo y sin poseer demasiados conocimientos.

En la siguiente guía mostraremos como configurar Cufon dentro de Wordpress.

Como primer paso obtendremos una copia del Plugin Wp-cufon y lo activaremos.

Una vez hecho pasaremos al panel de Administración donde configuraremos las opciones para que se adapten a nuestras necesidades.

A diferencia de otros sistemas como ser sIFR, Cufon necesita que cada fuente sea convertida a un formato que Cufon pueda leer y entender. Para eso tenemos que generarla desde la página de Cufon

Una vez generada la fuente la subiremos vía FTP a nuestro directorio que se encuentra en /wp-content/plugins/wp-cufon/fonts/

Si todo salió bien, Cufon reconocerá y activara las fuentes ya generadas y lo podremos ver desde el CP del Plugin.

Ahora llega lo mas divertido, poner en acción el Plugin.

Tenemos varias formas de trabajar con Cufon, todo por suerte desde el CP del Plugin, por lo que no tendremos que tocar la estructura de nuestro de Theme.

La forma más simple es reemplazar por etiquetas, con la siguiente sintaxis:

Cufon.replace('h1');

Donde Cufon reemplazara todos los encabezados H1 con la fuente Frutiger (que es la que viene por default)

Si queremos usar la fuente que creamos en paso anteriores la sintaxis será:

Cufon.replace('h1', { fontFamily: 'Mi Fuente' });

Podemos ir un paso más allá y darle un formato específico a nuestra fuente:

Cufon.replace('h1', {
color: '-linear-gradient(red, #fff, #23d559, rgb(0, 0, 0))'
});

De esa forma estaríamos logrado un efecto gradient. El efecto se genera desde arriba hacia y podes usar cualquier color (siempre dentro de los valores aceptados en CSS2).

Podes leer un poco más sobre como configurar los efectos y ver que propiedades son aceptadas por Cufon desde la Wiki de Cufon.

Y, por ultimo y no menos importante tenemos que mencionar que Cufon se lleva de maravillas con jQuery (y con otros Frameworks) por lo que podemos llevar el plugin a un paso más asignándole valores específicos a etiquetas en concreto, como se muestra en el siguiente ejemplo:

Cufon.DOM.ready(function() {
Cufon.replace('#sidebar h2, #sidebar a, #post h3');
});

Con este ejemplo le diremos a jQuery que reemplace vía Cufon todas las etiquetas H2 y a dentro del ID sidebar y la etiqueta H3 dentro del ID post.

Por lo que se verá algo así:

Como podrán ver es muy fácil de implementar ya que no requiere muchos conocimientos para llevarlo a cabo.

Por ultimo tenes que recordar que no todas las fuentes cuentan con los permisos para ser usadas con Cufon, así que lee bien las licencias para evitar futuros dolores de cabeza.