Cufón, Fuentes tipográficas con estilo propio para Joomla

Los estilos de fuentes y familias, a veces aburridos por repetición, como Arial, Verdana, Trebuchet y demás que se suelen utilizar en las paginas webs, sean joomla o no, son personalizables desde los archivos de estilo, algo complicado para la inmensa mayoria de usuarios y desarrolladores webs. Hoy día, la personalizacion en general de nuestras webs, es algo casi obligado, debido a la repetición en la utilización de las plantillas joomla disponibles de forma gratuita o de pago por medio de empresas como joomlart, youthemes, rocketthemes y otras…

1.- Porqué debemos personalizar

Una de las cosas que más nos puede fastidiar, es ver nuestra web repetida, en parte, en multidud de otras webs, debido al hecho de utilizar plantillas prediseñadas. Personalizar debe ser tarea obligada y el primer paso es cambiar y personalizar nuestro menu, títulos de contenidos, textos y demás. Ayudara a diferenciarnos de otros y nos dara un estilo reconocible, diferenciado y unico, respecto a otras webs. Y las fuentes que utilizamos o tipos de fuentes, puede ser un hecho diferencial para no parecerse a las demás.

2.- Navegadores y Extensiones joomla

Para poder realizar la tarea de forma sencilla existe un interface web de fontforge que permite crear fuentes SVG. A modo de explicacion breve, les comento que los Gráficos Vectoriales Escalables (en inglés Scalable Vector Graphics) o SVG, especificacion para describir gráficos vectoriales, que fue recomendada por la W3C en 2001, y ya ha sido incluido de forma nativa en el navegador web del W3C Amaya. Las versiones 1.5 y posteriores de Mozilla Firefox soportan gráficos hechos con SVG, como el navegador Opera en su versión 8 implemento SVG 1.1 Tiny en su núcleo. Google Chrome, Safari e Internet Explorer 9, incluso el nuevo explorar Windows Edge, también pueden mostrar imágenes en formato SVG sin necesidad de aplicaciones externas.

Para no tener que estar haciendo malabarismos con los estilos css o less, joomla dispone de extensiones que permiten realizar la tarea de utilizar fuentes no estandar y personalzarlas para nuestra web joomla que utiliza una interfaz web de fontforge que crea una fuente SVG llamada Cufón que utiliza un renderizador JavaScript, utilizando cualquier tipo de fuente.

3.- Plugin joomla KC Cufón

La extensión que quiero mostrarles es un plugin joomla para joomla 3.x, llamado KC Cufón Font Replacement.

KC Cufón Font Replacement nos va a permitir cambiar de forma sencilla fuente de textos, estilo de menus, fuente de titulo de contenidos y todo lo que queramos dentro de nuestro joomla. Y ya dejando de un lado los motivos y partes tecnicas que aunque no les sean de utilidad en la ejecución, si es util para saber porque y que estamos haciendo, pasamos a la parte de instalacion, configuracion y varios apuntes sobre donde conseguir fuentes y como generar el javascript de una fuente para que la utilizemos con el plugin KC Cufón Font Replacement.

4.- Instalacion plugin KC Cufón Font Replacement

Accedemos a la administracion de nuestro joomla 3.5 y en el menu horizontal desde Extensiones / Gestor de extensiones accedemos e instalamos el plugin.
Desde Extensiones / Gestor de plugins accedemos y desde la pestaña desplegable “Seleccionar tipo” seleccionamos “System”, encontraran el plugin System – KC Cufon, pulsando en el nombre editaremos el plugin para su configuracion. En el cuadro de la derecha “Opciones Básicas” observaran que hay ocho apartados para configurar distintos tipos de fuentes, y tres opciones primarias que son las siguientes:
  1. Load Mootools
    Activar o no Mootools. Si les genera alguna incompatilidad no lo activen.
  2. Display Font While Loading
    Visualización de fuentes al cargar, esta es la traduccion.
  3. Number of Different Fonts
    Es el numero de fuentes a tomar de 1 a 8 que son las disponibles

Cada apartado uno de los ocho apartados siguinetes se compone de los siguientes campos:

  1. Font Name
    En este campo deberemos introducir el nombre de la fuente. Aqui hay que señalar que este campo debe ser llamado igual que el nombre que hay dentro del JavaScript generado para cufón al inicio del codigo. Para editar el javascript, primero deberemos subir el archivo javascript generado en la carpeta /plugins/system/kc_cufon/fonts desde nuestro cliente ftp. Subimos el archivo, editamos y al inicio del codigo observaran un codigo como este font-family”:”Nombre de la fuente”, Nombre de la fuente debe ser escrito igual, con mayusculas si las tiene incluidas, ya que en el caso de no escribir bien el nombre solo podran aumentar o disminuir el tamaño de las fuentes sin cambio alguno.

  2. Font Filename
    En este campo deberemos introducir el nombre del archivo genereado pero sin su extension y parte ultima. Por ejemlo si el archivo que hemos subido es llamado League_Gothic_400.font.js deberemos escribir League_Gothic_400 obviando .fonts.js .


  3. CSS Selectors for Font
    Este campo es el que esta relacionado con las clases a las cuales queremos que nuestro archivo cufón efectue los cambios sobre la fuente original que utiliza la plantilla con la que estamos trabajando. h1, h2, h3, .contentheading o .componentheading… Cada clase incluida debe estar separada por una coma. Profundizo mas sobre este asunto, en este mismo tutorial en Estilos css y clases del core de joomla 2.5/3.x Tambien señalar que las diferencias entre joomla 1.5 y joomla 1.7 en este punto son minimas.


  4. Font Font-size
    Este campo esta destinado para darle el tamaño deseado a nuestra fuente cufón, y que se debe incluir con la abreviatura px de pixel. Por ejemplo 24px . A la hora de inlcuir el tamaño podemos ir probando hasta dar con el tamaño adecuado. Comprobar bien todas las fuentes que incluyen clases como h2, h3 o h4 que no es de extrañar que mas de una extension utilize esas clases que hacen referencia al tamaño de las fuentes y que son las recomendadas para obtener un mejor SEO para nuestra web joomla!

  5. Font Selectors Hoverable
    Esta opcion nos indica si es susceptible de cambiar de estado cuando el puntero del ratón está encima y volver al estado anterior cuando el raton ya no lo esta. Es recomendable seleccionar.

5.- Fuentes para el uso del plugin y generacón del archivo para Cufón

Bien aqui solo recomendare las siguientes paginas webs de fuentes de descaraga gratuita para posteriormente renderizar y convertir en un archivo javascript para cufón.

{xtypo_info} AstalaWEBLetraManiaMegafuentes {/xtypo_info}

6.- Generar JavaScript a partir de una fuente tipografica

Aqui os recomiendo utilizar las fuentes latinas basicas estandar y extendidas, ya que las basicas no suelen incluir los acentos tipicos y al generar la fuente podran observar que les puede faltar las letras que incluyen acentos.
Son varias las webs que nos facilitan la tarea para la generación del archivo JavaScript necesario para la creacion de nuestras fuentes. Algunas como www.cufonfonts.com ya incluyen la fuente, con lo que solo necesitamos elegir las opciones y generar el archivo que se os ofrecera para descargar para posteriormente subirlo a la carpeta de nuestro joomla. Otras como cufon.shoqolate.com/generate/ necesita que insertemos la fuente deseada para generar el archivo.

7.- Estilos css y clases del core de joomla 3.x

Lo mejor en estos casos es ir a la fuente no traducida, ya que de momento no hay traduccion que yo sepa sobre esta documentación. Desde la web de la Documentación sobre los estilos del core de joomla 1.6/7/2.5/3 podemos averiguar las clases utilizadas en el core de joomla para los estilos de modulos, componentes y demas.

Luego tenemos lo que son las clases utilizadas en la plantilla que hemos elegido para nuestra web joomla. Cada plantilla tiene sus propias clases para definir los estilos, las cuales podremos averiguar de varias formas diferentes, aunque sin duda la mas logica es adentrandonos en los archivos buscando esas clases definidas de forma particular por cada desarrollador segun el diseño de cada plantilla. Luego tenemos la posibilidad de utilizar la ya mas que famosa aplicacion para Firefox llamada firebug, al que he hecho referencia ya en mas de una ocasion en los tutoriales que redacto, que nos permite adentrarnos en el codigo para visualizarlo desde el navegador web firefox, lo que nos facilita la tarea bastante. Pueden ver en el tutorial sobre el uso de la tecnica template overrides el modo de uso de firebug, desde el cual adjunto enlace de descarga y otro enlace a un tutorial avanzado sobre el uso de firebug.

Para averiguar la clase desde el codigo, por ejemplo que se usa en nuestro menu, es cuestion de averiguar la posicion del modulo de menu dentro de la plantilla. Para averiguar la posicion que buscamos en joomla 1.7, añadiremos index.php?tp=1 a la url de nuestro dominio y apareceran todas posiciones de forma difuminada aunque suficientemente claras para averiguar la posicion del modulo en cuestion, luego editamos el archivo index.php de nuestra plantilla y buscamos la posicion. Observaran que encima de la posicion suele estar la clase que buscamos segun plantilla.

Una vez averiguada la clase hay que buscar la misma en uno de los archivos css que hay en la carpeta /css de la plantilla, suele ser template.css, para averiguar el nombre exacto en la hoja de estilo, como por ejemplo .nombre_de_la_clase (punto nombre_de_la_clase) , aunque para los menus suele haber un archivo preciso para el mismo, ya les digo que dependera de cada desarrollador y plantilla.

Nota:
Para navegadores antiguos colocar esta linea entre las etiquetas <head> del index.php de su plantilla.

 
<script type="text/javascript">// <![CDATA[ Cufon.now(); // ]]>
</script>

 
{xtypo_download} Descargar plugin KC Cufón Font Replacement Joomla 2.5 /3.x{/xtypo_download}

  •  
  •  
  •  
  •  
  •  
  •  

Comments

  1. marcolo

    Gracias Lorenzo
    Habia leido otros contenidos parecidos a este, pero otra vez tengo darte las gracias por los detalles que en los otros NO explican, ya me estaba volviendo loco, hasta que lei este tutorial de como hacerlo y [b]FUNCIONO[/b]. MIL gracias de nuevo. Eres un tio aplicado que da gusto seguir tus tutoriales por lo detallista que eres y tienes en cuenta siempre personas como yo, aprrendiz basico. Saludos.

  2. lorenzo

    Gracias
    Gracias Marcolo. Solo intento hacerlo lo mas claro posible y ponerme en el piel del que lo esta leyendo. Saludos.

  3. agus26k

    Consulta
    Hola como estas?
    Mira intale el Cufon y todo bien, no me da errores ni nada, incluso cuando coloco una fuente de las que trae predeterminadas anda muy bien, pero el tema esta en cuando uso el combertidor a js, combierto una tipografia que tengo a js, la subo a la carpaeta fonsts sigo todos los pasos pero joomla no toma la fuente, solo toma el tamaño, ya he revisado todo, y esta todo bien, que puede ser? Gracias, la fuente se llama EUROSTILE

  4. lucas41

    Acceso denegado web desarrollador
    No conseguia acceder a la web del desarrollador y esta mañana pasando por aqui me di cuenta que lo teniais actualizado. Gracias Mil.

  5. Missk

    Gracias mil!
    Hola Lorenzo , hace poco encontré tu página y me ha ahorrado muchos dolores de cabeza, y este del cufon es uno más, sin embargo aunque logre cambiar el tipo de fuente, aún no logro poder cambiar el tamaño, quizás me puedas echar una manito. Muchas gracias;)

  6. Missk

    Gracias mil!
    Ya lo solucioné , solo es jugar con los estilos de la fuente en el template , muchas gracias. 🙂

  7. lorenzo

    Si te ayudo,perfecto 😉
    Asunto solucionado.

    [b]Si os sirve la pagina, a otros tambien les podria servir, asi que divulgarlo por ahi, por las redes sociales y les hareis un favor a mas de uno ;).[/b]

    Lo que publico son experiencia propias, que a lo largo de los años me han ido sucediendo. Al final si lo juntas todo, el resultado es un portal llamado solojoomla de cierta envergadura, llevado por un solo tio, es decir, el aqui presente.

    [url=http://www.solojoomla.org]Solojoomla.ORG[/url] para contratar mis servicios y ayudar a mantener este portal, que me sale bastante caro, por tener que estar en un dedicado por su envergadura.

    [quote name=”Missk”]Ya lo solucioné , solo es jugar con los estilos de la fuente en el template , muchas gracias. :)[/quote]

  8. saikoru

    Saludos
    Muy buen día amigo Lorenzo, tu articulo me parece de lo más interesante, pero fijate que al instalar al Cufon, no me realiza ninguna acción sobre la tipografia, instale el mootools pensando que podría ser el detalle, pero la tipografia no cambia. Utilizo el template de meet cavern de Gavick, el cual es gratuito. Cual crees que pueda ser el problema?

    De antemano muchas gracias por tu atención.

Deja un comentario