Reemplazando texto con Cufon
Cufón es una librería javascript que permite reemplazar el tipo de letra (fuente) que por defecto usan los navegadores.
Caso práctico:
Probablemente la característica CSS más requerida por los diseñadores es la posibilidad de personalizar las fuentes de los sitios web. Actualmente la única forma real de hacer esto es confiar en Flash, ya sea construyendo todo el sitio con este programa o utilizando el script sIFR.
Cufon es una interface web que reemplazar a sIFR, evitando tener que utilizar software de propietario y optando, en su lugar, por canvas/VML para lograr la misma meta.
Técnicamente, Cufón es una interface web que crea una fuente SVG partiendo de la fuente de tu tipografía utilizando un renderizador JavaScript.
Podéis ver un ejemplo de cufon trabajando en uno de los últimos proyectos que he realizado con esta libreria: www.wordlab.es
Ventajas de Cufón
- No se necesita ningún plugin: Todo lo necesario para utilizar Cufón ya está disponible por defecto en el navegador de tus visitantes. Esto se debe a que en lugar de requerir Flash, Cufón se basa en JavaScript.
- Compatibilidad: Funciona en IE6, 7, 8 Firefox y Safari 3.
- Es fácil de utilizar: Se necesita escasa o directamente ninguna configuración.
- Es verdaderamente rápido: Carga casi instantáneamente sin tener que soportar el “parpadeo” que usualmente se experimenta con sIFR.
Ahora las cuestiones que tendremos que juzgar –con nuestro criterio personal–, son las que en su momento se analizarían sobre sIFR:
Accesibilidad:
Cufon de cara al posicionamiento (seo) de nuestros contenidos, es totalmente válido interprentando nuestros textos como xhtml válido
Usabilidad:
Una vez cargadas las librerías solo tendremos que declarar la función javascript que on body load realice la conversión con unas líneas de código.
Reemplazando con cufon h1 y h2 de nuestra página cargada
[script type="text/javascript"]
Cufon.replace(‘h1′);
Cufon.replace(‘h2′);
[/script]
Performance:
Cufon es una herramienta javascript que sobrecarga en cierta medida el frontend. En función de la capacidad de nuestro servidor, puede ser muy útil para convertir menus, titulares, contenidos destacados, pero en función del volumen de los contenidos que tenga una web puede ralentizar su carga por lo que es aconsejable realizar unas pruebas de rendimiento previamente.
Conclusiones:
De cara al diseñador: permite ser fiel al diseño original, mantener su creatividad sin tener que ajustarse a los patrones de fuentes predefinidas que soportan nuestros equipos.
De cara al programador: permite una fácil integración de fuentes evitando tener que usar sIFR, freefonts, etc
De cara al usuario: establece la comunicación que deseamos para nuestra aplicación sin tener que contar con fuentes auxiliares, siendo fieles al diseño y a la imagen que se quiere transmitir

April 15, 2010 - 9:39 AM
Es genial, puedes confeccionar xhtml5 estricto con esta librería!, y el que no tenga canvas o no use Javascript leería su equivalente en fuentes comunes. Lo único es que los títulos se deberían cargar a posteriori si no quieres pausar el proceso de carga de la página, hasta que no valla todo un poquito más rápido, en determinadas situaciones, habrá que seguir generando imágenes. Respecto a flash… a mí no me pareció buena la idea nunca para las tipos.
April 20, 2010 - 9:05 AM
Hola Alfonso.
Gracias por tu respuesta.
No estoy de acuerdo contigo en dos puntos:
-El proceso de carga de la página no se pausa, lo que se hace es pintar la página con su css y cuando el body se ha cargado, realizar la transformación.
-Cufon es mejor que utilizar imágenes de cara al seo de los contenidos, ya que posicionas texto no imágenes.
June 17, 2010 - 7:32 PM
tengo varias pregunta sobre Cufon, que tanto afecta la posicionamiento, como ve los motores de busqueda cufon en los textos.
Como afectaria el posicionamiento a una pagina la cual esta bien posicionada en html y se decide poner cufon a los enlaces.
Que tanto afectaria.
Ahora estoy usando carrusel de jquery y puse textos con cufon ahi pero en firefox no se ve el texto con cufon ni nada, y en IE aparece ambos el texto con cufon y el html montado.
alguien tiene algun conocimiento de esto?
June 18, 2010 - 4:10 PM
Hola!
Cufon lo que hace es crear un canvas con el contenido por lo que el texto se posiciona de forma natural.
Si tienes problemas con los navegadores es porque algo no has implementado bien, te muestra errores firebug?
Mira, este es el último trabajo realizado con cufon y se ve bien en todos los navegadores.