Utiliza cualquier fuente en tu web con Cufón y Wp-Cufón

Ya hemos hablado sobre la importancia de utilizar tipografías que comunmente estén cargadas en todos los equipos de nuestros visitantes, para poder conservar el aspecto general del sitio. Las alternativas para utilizar fuentes poco comunes eran algo tediosas, teniendo que utilizar Flash o algún script que debías subir a tu servidor. Hasta ahora.

Cufón es un generador que crea una fuente SVG de tu tipografía con un renderizador JavaScript. Los colegas de ElWebmaster se explayan muy bien al respecto comentándonos los pro y contras de esta tecnología. Para hacer uso del generador, basta con ingresar a Cufón – Fonts for the people y seguir las instrucciones.

WP-Cufón para WordPress

¡Uhuuuuu! (leer con voz de Homero Simpson). Cufón para WordPress es una maravilla, fácil de instalar y de asociar rápidamente con las distintas etiquetas de nuestro estilo. Para descargarlo, corramos al repositorio oficial clickeando en este link. Lo descomprimimos y subimos a nuestra carpeta:

wp-contents/plugins

Las fuentes que vayamos a utilizar deben convertirse a .js para que Cufón las pueda leer. Para ello vamos a este site con nuestra fuente predilecta y la convertimos. Una vez obtenido el archivo en cuestión la subimos a la carpeta wp-plugins/plugins/fonts, que deberemos crear.

Código en nuestro estilo

Ahora corramos a nuestro estilo (generalmente style.css) y reeplacemos el tag h1 para que nos quede esto:

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

En donde ‘Fuente’ es el nombre de tu flamante font convertido. Como si fuera poco, podemos aplicar más efectos todavía, veamos un ejemplo haciendo uso de CSS2 para darle un efecto degradado.

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

Nuestra imaginación es el límite (y los navegadores como el IE6… Cof, cof…). Si quieren ver más sobre los estilos que pueden aplicar, chequeen esta wiki ¡y esperamos que lo aprovechen!