Autor: Jack Bach

Bach es el autor principal de este blog. A los 15 años le dio por hacer un juego en flash y eso le llevó a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos años y ha aprendido sobre todo XHTML y CSS para maquetar sus diseños web.

Me imagino que una de las decepciones mas grandes que alguien que está aprendiendo a maquetar webs con html y css que cuando se empieza a dominar el código surge la sigueinte duda ¿como puedo usar la fuente que a mi me de la gana?

Es verdad que tenemos font-face en css, pero no funciona en Firefox anteriores a la versión 3.5 ni en Explorer. Hasta hace poco esto solo se podía solucionar con lo que se llamó sIFR, algo complejo y basado en flash – por lo que no lo recomiendo para nada. Afortunadamente ha nacido Cufón, una solución que se basa en javascript y es basatante rápida y sencilla.

Generar un js de la fuente

Ya sé que suena raro, pero no es para tanto. Lo primero que tenemos que hacer es generar un js. a partir de la fuente que hemos de tener (sí, tenemos que tener el archivo ttf o el otf). No hace falta ni que entendamos que es ni como se hace ya que hay un generador que se encarga de hacer esto por nosotros.

Una vez en el generador podemos seleccionar los diferentes opciones. Por una parte podemos subir las diferentes versiones de la fuente que vayamos a utilizar. No subas más de lo necesario, ya que cada añadido hace que el archivo pese más y por consiguiente nuestra página tardará más en cargar. Yo recomiendo:

• Uppercase
• Lowercase
• Numerals
• Punctuation
• and also these single characters: áéíóúñ

Las demás opciones son pan comido para los lectores de tinnta ;)

Añadir el código a nuestra página

Primero descargamos el código javascript que se encarga de hacerlo todo clickando download en esta página.

Ahora, en el header de nuestro html insertamos el siguiente código:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Delicious_700.font.js" type="text/javascript"></script>

Gracias a estas dos líneas de código podremos trabajar con los archivos que hemos descargado – en nuestro caso estarán en una carpeta llamada “js” que estará en el mismo directorio que nuestro archivo html.

Ahora es el momento de decir que queremos hacer con todo ese código que emos importado. En nuestro caso vamos a usar la fuente para los h1. Insertaremos este código.

<script type="text/javascript">
	Cufon.replace('h1');
</script>

Y esto es todo. Podéis ver el ejemplo aquí.