Usar fuentes raras en página web con Cufon

Siempre que diseñamos nuestra página web nos gustaría usar fuentes diferentes a las acostumbradas Arial o Verdana, en internet explorer podemos usar el atributo @font-face que lo explicamos aquí, sin embargo ese método no nos funciona para el resto de exploradores, con este tutorial vamos a usar la herramienta Cufon para poder usar cualquier tipo de fuente en nuestra web sin importar el explorador que usemos.

Paso: 1

Lo primero que debemos hacer es entrar a esta página y hacer clic en el botón que dice “Download”, al hacerlo se va a abrir una página que es un archivo Javascript, una vez ahí vamos a hacer clic en “Archivo>>Guardar como..”

Y lo guardamos como cufon-yui.js en la carpeta de nuestra web.

Este archivo es el que se encarga de generarnos el efecto y el que nos permite usar cualquier fuente, ahora necesitamos la fuente, ese es nuestro segundo paso.

Paso: 2

Puedes usar cualquier fuente, yo te recomiendo que las descargues desde Dafont donde hay una buena cantidad para descargar y usar.

Aviso

1- Asegúrate de que la fuente que elijas sea de uso personal, y que permita ser usada en páginas webs.
2- Asegúrate que la fuente que elijas tenga: Negrita, cursivas y caracteres como: acentos, ñ y signos como interrogación y exclamación, por ejemplo esta fuente.

Paso: 3

Es turno de generar el archivo Javascript de nuestra fuente, para eso vamos a la página del principio y la vamos a configurar de la siguiente manera:

Regular Typeface: Aquí vamos a seleccionar la fuente regular que nos descargamos (Opcional)
Bold Typeface: Aquí vamos a seleccionar la fuente en negrita que descargamos (Opcional)
Italic Typeface: Aquí seleccionamos la fuente en cursiva o itálica que descargamos (Opcional)
Bold Italic Typeface: Seleccionamos la fuente negrita cursiva o itálica que descargamos (Opcional)
Use the following value as the font-family of the generated font: Aquí colocamos un nombre común para todas las fuentes, es usado en caso de que las cursivas, negritas y fuentes regulares tengan diferentes nombres (Opcional)
The EULAs of these fonts allow Web Embedding: Selecciona esta casilla si de verdad tienes el derecho de usar la fuente
Include de following Glyphs: Aquí vamos a seleccionar los caracteres que queremos tener disponibles en nuestra fuente, yo te recomiendo que coloques “all”, pero si no quieres que tu archivo sea muy pesado puedes seleccionar: “Uppercase, Lowercase, Numerals, Punctuation, Basic Latin y Latin-1 supplement“
Limit usage to the following domain(s): Coloca aquí los dominios restringidos para usar la fuente (Recomendado si estas usando fuentes comerciales)
Performance and file size: No te recomiendo que toques nada aquí
Customization: No toques nada tampoco
Terms: LEE LOS TERMINOS Y CONDICIONES, selecciona la casilla y haz clic en “Let’s do this”.

Cuando selecciones el ultimo botón, se va a descargar un archivo javascript, guárdalo en tu web.

Paso: 4

Es hora de usar la fuente en nuestra página, para eso vamos a agregar los siguientes códigos en nuestro header:

1 2	<script src="cufon-yui.js" type="text/javascript"></script> <script src="nombre-del-archivo-descargado.js" type="text/javascript"></script>

En ese caso los archivos guardados al principio están en la carpeta raíz de nuestro tema, recuerda cambiar el “nombre-del-archivo-descargado” en la segunda línea. Si guardas los archivos en una carpeta, por ejemplo “js”, nuestro código nos queda de la siguiente manera:

1 2	<script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/nombre-del-archivo-descargado.js" type="text/javascript"></script>

Ahora vamos a suponer que queremos usar la fuente para los títulos h1, lo que tenemos que hacer es agregar el siguiente código en el header de nuestra web

1
2
3

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

Listo!, ahora cada vez que usemos un titulo h1, la fuente va a ser reemplazada por la que descargaste en el paso 2.

Paso: 5

Este mas que un paso es como un tip, resulta que puedes usar cualquier estilo css para tus títulos, por ejemplo: color, ancho, espaciado de letras, etc.
Además puedes agregar gradientes usando un javascript especial para cufon pero eso te lo dejo a ti, anímate y revisa la Documentación para que sepas todas las maravillosas características que puedes usar.

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

10 Comentarios en "Usar fuentes raras en página web con Cufon"

maisa

26 Diciembre 2009

Respuesta

mmm.. interesante tutorial! Lo voy a poner en practica :)
- Mijael
  
  27 Diciembre 2009
  
  Respuesta
  
  Si maisa, la verdad que cufon es una herramienta muy util :P te lo recomiendo 100%
maisa

27 Diciembre 2009

Respuesta

Oh es muy facil!
Cambie las negritas del sitio…
:)
betfair strategies

27 Diciembre 2009

Respuesta

Good article . Will definitely copy it to my blog.Thanks.
germanwle

2 Enero 2010

Respuesta

wooow,lo intentare aver que sale xD
Alina

4 Marzo 2010

Respuesta

estoy tratando de implementar el cufon en mi sitio, el mismo esta armado en php y con CSS, puede ser por esto que no logre que el cufon me funcione¿?
gracias
- Mijael
  
  4 Marzo 2010
  
  Respuesta
  
  No alina, el problema debe ser otro, aqui esta web esta hecha con PHP y CSS y estoy usando cufon, no tiene nada q ver, revisa bien los codigos y las rutas a los archivos
Fabian

17 Marzo 2010

Respuesta

Una consulta si quiero agregar mas fuentes y luego usarlas con la funcion como se puede hacer?
Mijael

17 Marzo 2010

Respuesta

Mmmm buena pregunta xD deberias checar la documentacion porque no te tengo respuesta para eso xD http://wiki.github.com/sorccu/cufon