El otro día trabajando con una web en WordPress e investigando porqué no se mostraban los acentos, descubrí que estaba utilizando Cufón.

Cufón es una librería que nos permite utilizar casi cualquier tipografía en nuestras webs, asegurándonos de que los usuarios que las visitan visualicen correctamente el contenido con el tipo de letra con la que se diseño. De esta forma, no dependeremos ni del navegador ni del Sistema Operativo del que estemos consultando la web.

Conociendo ya su funcionamiento, en caso de que queramos integrar esta tecnología dentro de nuestra web, necesitaremos descargarnos la librería en cuestión, seleccionar la tipografía que vamos a utilizar en nuestra web y convertirla en código JavaScript para que los visitantes visualicen siempre la web con el tipo de letra correcto.

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: Seleccionar la fuente que vamos a utilizar en nuestra web

Cufón acepta tipografías .otf y .ttf. Estas son algunas webs donde podemos descargar fuentes gratuitas:

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/

Paso 3: Convertir las fuentes a JavaScript

Una vez seleccionada la fuente necesitamos convertirla en un archivo JavaScript y alojarla en nuestra web. Para realizar esta conversión, es muy sencillo, basta con acceder a la siguiente url y rellenar el formulario, proporcionando la fuente en .otf o .ttf y seleccionar la codificación que vamos a utilizar en nuestra web:

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

En las imágenes se muestran los aspectos más importantes a tener en cuenta. En la primer sección tenemos que subir el o los archivos correspondientes a nuestra tipografía (.otf o .ttf). Si sólo tenemos uno, utilizaremos el primer campo “Regular typeface”.

¡Muy importante, hay marcar el checkbox!

cufon1

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, para aquellos tipos de letra que nos los incorporen:

áÁéÉíÍóÓúÚñÑ

cufon2

Yo me encontré con un caso que no funcionaba esto y al final tuve que buscar un tipo de letra similar y cambiarlo en la web, modificando la entrada del script que carga la fuente en JavaScript indicando el fichero nuevo.

Para terminar, aceptamos las condiciones de uso y pulsamos sobre Let’s do this!. En pocos segundos comenzará la descarga de nuestra fuente convertida en JavaScript.

Paso 4: Insertar el código para que nuestra web use Cufón con nuestra tipografía nueva

Dentro del <head> insertamos la carga de la librería de Cufón, jQuery, 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 qué etiquetas HTML queremos que se aplique la nueva tipografía.

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

Si tenemos múltiples fuentes en nuestra web, tendremos que especificar para cada etiqueta del HTML la fuente a usar de la siguiente manera:

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

Más información sobre cómo usar Cufón

http://cufon.shoqolate.com

Plugins opcionales

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

Guardar

Advertisements

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

CERRAR

Pin It on Pinterest

Share This

Compártelo

¡Comparte este artículo con tus amigos!