Cómo agregar fuentes de Google Fonts a plantillas Joomla
- Categoría: Tutoriales Joomla
- Visto: 4752
El directorio Google Web Fonts es una de las novedades más interesantes en relación a la tipografia web y para evitar la carga de código excesivo. Google Fonts nos permite, a desarrolladores, incluir fuentes no estandar para darle un punto diferencial, para los navegantes, a los desarrollos de paginas joomla, blogs, tiendas online, entre otros y asi poder disfrutar de otras fuentes no habituales con un estilo personalizado para nuestra web...
Anteriormente, en joomla, para agregar fuentes no estandar, se utilizaba y se puede seguir utilizando plugins como KC Cufón Font Replacement (Saber más) para agregar fuentes no estandar, y para otros, código JavaScript con una pesada carga sobre nuestro ancho de banda y los tiempos de carga de la página. El nuevo servicio de directorio ofrecido por Google Fonts nos va a permitir quitarle ese tiempo de carga extra, que nos penaliza y repercute directamente en el SEO, por tiempo de carga elevado en buscadores.
Cómo agregar manualmente las fuentes de Google web Fonts a nuestras plantillas de Joomla
En la primera parte de este tutorial voy a mostrar como insertar y ajustar manualmente el código (Cascading Style Sheet referencias y estilos CSS) a sus plantillas Joomla.
1.- En primer lugar visitar el Directorio de Google Fonts (Vista previa en la selección) y encontrar la fuente que estamos interesados en usar. Por ejemplo Gentium+Basic, pudiendo ser cualquier otra. Esto es solo a modo de ejemplo y se puede encontrar desde el buscador de Google Fonts poniendo la palabra Gentium, obteniendo varios resultados. Seleccione Gentium+Basic porque si, nada mas.
2.- Una vez que haya encontrado la fuente que desea utilizar, haga clic en el enlace a la derecha de la fuente que dice: Quick Use (Uso Rápido). Esto ampliará la selección de la fuente y mostrara el código que tendrá que añadir a su plantilla.
3.- Desplácese por la página hasta que pueda ver la Hoja de Cascada de Estilo (CSS) de referencia que necesita para su uso. Se parece a esto y se encuentra dentro de un cuadro azul:
. Seleccionar la linea, y Copiar.
2.- Una vez que haya encontrado la fuente que desea utilizar, haga clic en el enlace a la derecha de la fuente que dice: Quick Use (Uso Rápido). Esto ampliará la selección de la fuente y mostrara el código que tendrá que añadir a su plantilla.
3.- Desplácese por la página hasta que pueda ver la Hoja de Cascada de Estilo (CSS) de referencia que necesita para su uso. Se parece a esto y se encuentra dentro de un cuadro azul:
4.- El siguiente paso es editar el archivo index.php (En la mayoria de los casos) de nuestra plantilla. Lo haremos accediendo con nuestro cliente FTP editando directamente o mejor descargando el archivo y editando en nuestro ordenador, hasta conseguir el efecto deseado. Mas en estos casos, que cada desarrollador de plantilla, tiene su propia forma de desarrollar el código de las mismas, algo que la mayoria ya abra.
5.- En el archivo index.php vaya a la parte del archivo donde se incluye los estilos del archivo CSS soliendo ser dentro de la cabecera <head>...</head> aunque no siempre, incluso, no tiene porque ser el archivo index.php, dependera de la palntilla que hemos elegido. Por debajo de la referencia temática archivo CSS añadir la nueva refrencia Google Fonts para el CSS. El código deberá ser similar a esto:
5.- En el archivo index.php vaya a la parte del archivo donde se incluye los estilos del archivo CSS soliendo ser dentro de la cabecera <head>...</head> aunque no siempre, incluso, no tiene porque ser el archivo index.php, dependera de la palntilla que hemos elegido. Por debajo de la referencia temática archivo CSS añadir la nueva refrencia Google Fonts para el CSS. El código deberá ser similar a esto:
Gentium+Basic como las fuentes elegidas y deberan probar primero antes de guardar añadiendo la linea de código copiada
6.- Nuestro último paso consiste ahora en determinar a qué elemento queremos destinar las Fuentes de Google. Por ejemplo es posible que deseemos asignar la nueva fuente de Google para el elemento h1. Para ello editaremos el archivo css dentro de la carpeta templates/nombre_plantilla/css. Normalmente tempalte.css o style.css.
7.- Deberemos crear una nueva regla CSS y añadir este código al final del archivo style.css:
7.- Deberemos crear una nueva regla CSS y añadir este código al final del archivo style.css:
9.- Eso es todo! Tarea Completada. Ahora sólo tiene que guardar y subir los archivos modificados en su servidor web para que los cambios surtan efecto.
Usando un Plugin Joomla para añadir fuentes de Google a nuestra plantilla:
La gran ventaja en el uso de Joomla, es que casi siempre hay plugins disponibles para cualquier tarea que queremos lograr.
Si no se sienten cómodos o seguros editando archivos, siempre se pueden descargar e instalar uno de los plugins disponibles para agregar el código de Google Fonts, como el plugin joomla HD-GFonts para Joomla 1.5, Joomla 1.7 y Joomla 2.5 con más de 200 fuentes (incluyendo variaciones en negrita, cursiva y negrita cursiva) para elegir, incluyendo:
Cantarell, Cardo, Crimson Text, Cuprum, Droid Sans, Droid Sans Mono, Droid Serif, IM Fell Double Pica, Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Neucha, Neuton, Nobile, OFL Sorts Mill Goudy, Old Standard TT, PT Sans, Philosopher, Reenie Beanie, Tangerine, Vollkorn and Yanone Kaffeesatz...
Si no se sienten cómodos o seguros editando archivos, siempre se pueden descargar e instalar uno de los plugins disponibles para agregar el código de Google Fonts, como el plugin joomla HD-GFonts para Joomla 1.5, Joomla 1.7 y Joomla 2.5 con más de 200 fuentes (incluyendo variaciones en negrita, cursiva y negrita cursiva) para elegir, incluyendo:
Cantarell, Cardo, Crimson Text, Cuprum, Droid Sans, Droid Sans Mono, Droid Serif, IM Fell Double Pica, Inconsolata, Josefin Sans Std Light, Lobster, Molengo, Neucha, Neuton, Nobile, OFL Sorts Mill Goudy, Old Standard TT, PT Sans, Philosopher, Reenie Beanie, Tangerine, Vollkorn and Yanone Kaffeesatz...
Modo de uso del Plugin HD-GFonts
Instalamos el plugin, accedemos a Extensiones / Gestor de plugins y editamos el plugin. En la parte derecha de su pantalla, en Parámetros del plugin, seleccionamos una las fuentes en la primera opción activada por defecto, siendo cinco tipos de fuentes y estilos las posibilidades que nos da la configuración del plugin, solo con habilitar las opciones y configurandolas a nuestro gusto, siendo ya preconfiguradas para las opciones H2, H3, H4 y H5.
En cada una de las opciones, tenemos los campos de class y aditional css, o sea, Clase y css o estilo adicional.
En cada una de las opciones, tenemos los campos de class y aditional css, o sea, Clase y css o estilo adicional.
Puede aplicar más reglas CSS a la clase añadiendolas en el campo Additional CSS (por ejemplo, "color: blue"). Para solicitar más de una regla CSS hay que separarlos con un punto y coma (por ejemplo, "color: red; font-size: 20px").
Descarga Plugin HD-GFonts para Joomla 1.5, joomla 1.7 y Joomla 2.5
Comentarios
Suscripción de noticias RSS para comentarios de esta entrada.