SummArg | Cursos y recursos para webmasters

23/01/2012

Guía para instalar Cufón en cualquier proyecto web

Cufón es una librería que nos permite utilizar casi cualquier tipografía en nuestros websites, asegurándonos que los usuarios de nuestras páginas puedan observar exactamente la fuente que nosotros elegimos, sin importar si la tienen instalada o no en su sistema operativo. Tiempo atrás hicimos una introducción a Cufón y recomendamos un plugin para utilizarlo con WordPress. En esta nota los guiaremos en el proceso de insertar Cufón en cualquier proyecto web (funciona con WordPress y otras plataformas también).

¿Cuándo se vuelve necesario Cufón en lugar de @font-face?

@font-face es un método increíblemente mas liviano y práctico a la hora de diseñar un website. Pero tiene la desventaja de depender de el navegador y del sistema operativo del usuario para renderizar la fuente, lo que produce que muchos usuarios vean las fuentes pixeladas y nuestro trabajo no se vea tan bonito. Si la tipografía juega un papel crucial en el diseño de tu sitio, es posible que necesites utilizar Cufón.

Paso 1: Descargar la librería

Existen dos sitios desde donde podemos descargar el archivo cufon-yui.js:

http://cufon.shoqolate.com/generate/ (recomendado)

https://github.com/sorccu/cufon

Paso 2: Descargar fuentes

Cufón acepta tipografías .otf y .ttf. Podemos descargarlas desde:

http://www.google.com/webfonts

http://www.fontsquirrel.com/

http://www.cufonfonts.com/

http://www.urbanfonts.com/

http://www.1001freefonts.com/

http://www.dafont.com/es/

http://www.free-fonts.com/

http://www.fontreactor.com/

O bien desde cualquier otro sitio que entregue los formatos indicados.

Paso 3: Convertir las fuentes

Una vez obtenida la fuente necesitamos convertirla en un archivo JavaScript para ser utilizada en nuestro proyecto. Nos dirigimos al formulario ubicado en:

http://cufon.shoqolate.com/generate/

En las imágenes colocamos unicamente los puntos importantes. En la primer sección tenemos que subir el o los archivos correspondientes a nuestra tipografía. Si sólo tenemos uno, utilicemos el primer campo. Recuerden marcar el checkbox.

En la segunda sección maquemos “Basic Latin” y si utilizamos WordPress podemos marcar “WordPress Punctuation“. Además es buena idea añadir los caracteres con acentos y la eñe: áÁéÉíÍóÓúÚñÑ

Finalmente aceptamos las condiciones de uso y clickeamosLet’s do this!“. En pocos segundos comenzará la descarga de nuestra fuente convertida.

Paso 4: Insertar el código

Entre etiquetas <head> insertamos jQuery, Cufón y el link a nuestra fuente convertida de la siguiente manera:

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

Antes del cierre de la etiqueta <body>, le indicamos a Cufón a que etiquetas queremos que se aplique.

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

Si tenemos múltiples fuentes para gestionar, entonces deberemos especificar la tipografía de la siguiente manera:

<script type="text/javascript">
Cufon.replace ('h1', 'h2', 'h3', { fontFamily: 'Bebas Neue' });
Cufon.replace ('p', { fontFamily: 'Nunito' });
</script>

Esto es todo. Si estás usando algún CMS pueden interesante los siguientes plugins:

Cufón para WordPress

Cufón para Drupal

Cufón para Joomla

Cufón para vBulletin

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Cufón es una librería que nos permite utilizar casi cualquier tipografía en nuestros websites, asegurándonos que los usuarios de nuestras páginas puedan observar exactamente la fuente que nosotros elegimos, sin importar si la…..

  2. Julio Gibrán

    Quiero disculparme, soy nuevo en esto.

    Cuando quiero descargar cufon me aparece una página con puro código. ¿Es ese el archivo que tengo que cuardar como javascript o la página tiene un error

  3. Julio Gibrán

    Quiero disculparme, soy nuevo en esto.

    Cuando quiero descargar cufon me aparece una página con puro código. ¿Es ese el archivo que tengo que cuardar como javascript o la página tiene un error.

  4. Hola Julio. En el enlace tienes que pinchar con el botón derecho y pulsar “guardar como”. Así guardas el fichero.
    O también, una vez que ves el código, puedes hacer un copia y pega, da lo mismo.

Dejar un comentario