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.
Tabla de contenidos
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
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!
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:
áÁéÉíÍóÓúÚñÑ
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:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2Fscripts%2Fjquery.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2Fscripts%2Fcufon-yui.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22%2Fscripts%2FBebas_Neue_400.font.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0ACufon.replace%20('h1'%2C%20'h2'%2C%20'h3'%20)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0ACufon.replace%20('h1'%2C%20'h2'%2C%20'h3'%2C%20%7B%20fontFamily%3A%20'Bebas%20Neue'%20%7D)%3B%0ACufon.replace%20('p'%2C%20%7B%20fontFamily%3A%20'Nunito'%20%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
Plugin de WordPress para Cufón
Si estás usando WordPress puede que te interese usar esl plugin de Cufón para wordpress:
¡Hola! Soy Javier. Soy informático y me gusta documentar todo lo que aprendo. En mi blog te enseño todo lo que sé y cómo puedes aprender a crear tu propia web, mejorar el SEO y aplicar técnicas de Marketing Digital para conseguir mayor visibilidad. Suscríbete para no perderte ninguna de mis guías sobre WordPress, posicionamiento SEO o Marketing Digital.
