Lunes, 13 Diciembre 2010 02:36

Reemplazando fuentes en Joomla! con KC Cufón Font Replacement

Escrito por 
CMS:  Joomla! |  Versión:  1.5.x |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  10 minutos


KC Cufón Font ReplacementCada vez más demandamos a nuestro sitios web no solo contenidos sino estética, algo que en muchos casos marca la diferencia a la hora de ser escogidos por los usuarios como sitio preferentes de navegación, sobre todo si nuestro sitio web está orientado a tendencias, moda, productos juveniles y un largo etcétera.

Las tipografías habituales en entorno html y por consiguiente en Joomla! son Arial, Verdana, Times, Helvetica, courier y algunas más, pero todas ellas muy simples en términos de estética.

La mayoría de desarrolladores recurren al CSS pero se ven limitados a la hora de implementar tipografías con estilos escalables y menos comunes ya que no son reconocidas por los navegadores habituales. Otros hasta hace poco hacían uso (aún es una técnica muy utilizada) del script sIFR, que brevementee diremos que utiliza la tecnología Flash y Javascript para renderizar un texto con la tipografía incluida en una película Flash alojada en el servidor, con la ventaja de ser bastante accesible, muy rápido en ejecución y compatible con la mayorías de navegadores populares aunque también tienen algunos importantes inconvenientes.

La opción que queremos plantear es el reemplazo de tipografías con Cufón mediante software no propietario, en este caso Canvas/VML, que permite los mismos resultados que sIFR. En términos técnicos podemos decir que Cufón es una interface web de FontForge que crea una fuente SVG partiendo de la fuente de tu tipografía utilizando un renderizador JavaScript, lo que permite sustituir con este js el tipo de letra que por defecto utiliza el navegador, además de permitirnos utilizar cualquier tipo de fuente que sea de nuestro agrado o por razones de imagen corporativa que precisemos utilizar.

Algunas de las mejoras que conlleva utilizar Cufón y el plugin KC Cufón Font Replacement:

- Rapidez de carga, evitando el efecto parpadeo de sIFR.

- Cufón ya viene por defecto con los navegadores lo que evita tener que instalar plugins para su uso y/o visualización, pues no necesita hacer uso de Flash ya que hace uso del moto de JavaScript.

- Es compatible con los navegadores más utilizados actualmente, en particular las versiones de Internet explorer 6, 7, 8 y 9, también con - Firefox, Opera y Safari, aunque en algunos es posible que pueda tener fallos (IE 5 o Safari 2).

- Rápida implementación en Joomla! e uso casi inmediato.

- Se puede deshabilitar a través del plugin que proponemos simplemente deshabilitando un checkbox.

El proceso lo podemos resumir en apenas 4 pasos:

1.- Descargar, instalar y habilitar el plugin KC Cufón Font Replacement en el Joomla! Extensions Directory: http://extensions.joomla.org/extensions/style-a-design/typography/11243  o en su web oficial: http://www.keashly.net/typography/kc-cufon-font-replacement 

2.- Generar el archivo necesario en javascript de la fuente que queramos utilizar para nuestra web como reemplazo. Para generar el archivo javascript necesario para el reemplazo de la fuente original TTF (True Type Font) podemos recurrir a la siguiente página donde mediante el generador disponible en apenas unos segundos obtendremos un empaquetado .js de nuestra fuente en cuestión.

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

3.- Copiar el archivo de nuestra_nueva_fuente_400.font.js en la ruta /plugins/system/kc_cufon/fonts/ de nuestro Joomla!.

4.- Habilitar desde el gestor de Plugins, System kc_cufon nuestra_nueva_fuente_400 en los Parámetros del mismo según la siguiente captura.


parametros_kcufon1Con estos pasos deberíamos tener el plugin correctamente instalado y habilitado, copiada la fuente o fuentes que vayamos a utilizar en la web para que reemplacen a las que tenemos por defecto, y parametrizados los valores necesario para que carguen solamente en aquellas clases o estilos que necesitemos.

Una de las ventajas es que podemos en cualquier momento deseado inhabilitar el plugin y todo volverá a cargar por defecto como estaba antes de su instalación o desactivar alguna de las fuentes de reemplazo en los parámetros del plugin bien globalmente o para un estilo o clase concretos, lo que nos evitará por un lado tener que insertar código en archivos .php y mayor control sobre nuestras nuevastipografías, evitando editar hhojase estilo en cascada -CSS- para cada estilo que nenecesitemoseemplazar "h1, h2, h2.contentheading, .contentheading, h4", etc.

Otra de las grandes ventajas es que con esta técnica aumentamos enormemente el banco de tipografías a poder utilizar en un sitio web ya que son innumerables las que partiendo de Tre Type Font (TTF) podemos convertir con esta técnica.

A continuación un par de ejemplos claros de aplicación rápida de Cufón sobre el estilo "h1" que afecta a los títulos de los artículos de Joomla!

Antes:

Después:

Otro ejemplo de uso de Cufón con KC Cufón Font Replacement para sustituir la tipografía Arial por defecto de la plantilla para el menú por otra tipografía más acorde a la estética del sitio y ocupando menos espacio en la barra de menú.

Antes:

Después:

Algunos enlaces desde los que podemos obtener tipografías para convertirlas de TTF a .js para su usó con Cufón:

- http://www.creativosonline.org/blog/20-fuentes-para-usar-con-cufon.html 

- Directorio de Fuentes Libres: http://www.openfontlibrary.org/wiki/Existing_Free_Fonts 

Si quieres profundizar más sobre el uso e implementación de Cufón no dejes de visitar su Wiki oficial: https://github.com/sorccu/cufon/wiki 

Por último ponemos a tu disposición la extensión traducida al Castellano (Español formal internacional):

{quickdown:10}

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+


Artículos relacionados