Cómo Agregar Fuentes De Google Fonts A Plantillas Joomla

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.

Tabla de Contenidos

1.- Buscar la fuente tipográfica
2.- Ampliar opciones y código plantilla
3.- Estilo referencia CSS
4.- Edición index.php plantilla
5.- Insertar el código para la fuente
6.- Selección elementos para emplear fuente
7.- Usando un Plugin Joomla para añadir fuentes de Google
8.- Modo de uso del Plugin HD-GFonts

1.- Buscar la fuente tipográfica

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.- Ampliar opciones y código plantilla

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.- Estilo referencia CSS

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:

<link href='http://fonts.googleapis.com/css?family=Gentium+Basic' rel='stylesheet' type='text/css'>

. Seleccionar la linea, y Copiar.

4.- Edición index.php plantilla

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.- Insertar el código para la fuente

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:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>
/templates/system/css/system.css" type="text/css" />
 <link href=‘http://fonts.googleapis.com/css?family=Gentium+Basic’ rel=‘stylesheet’ type=‘text/css’>{/code} 
Gentium+Basic como las fuentes elegidas y deberan probar primero antes de guardar añadiendo la linea de código copiada 
{code}<link href='http://fonts.googleapis.com/css?family=Gentium+Basic' rel='stylesheet' type='text/css'>

6.- Selección elementos para emplear fuente

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:

h1 {
 font-family: "Gentium Basic ', serif;
 }

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.

7.- Usando un Plugin Joomla para añadir fuentes de Google

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 Joomla 3.x 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…

8.- 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.

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”).

{xtypo_download} Descarga Plugin HD-GFonts para Joomla 3.x {/xtypo_download}

Otra opción para Joomla 3, es el componente Phoca Font.

Descargue el componente Phoca Font, plugin de Phoca Font.
Instale el componente y el plugin.
Activar plugin.
Ir a Componentes / Phoca Font. Haga clic en Nuevo y añada el nombre de la fuente del Directorio Google Fonts (Google Web Fonts) y guardar.
Ir a Panel de control de Phoca Font, haga clic en Opciones y establecer la etiqueta, clase o id donde se aplicará la fuente seleccionada – por defecto hay una etiqueta. lo que significa, que la fuente se utilizará en toda la página (etiqueta diferente, clase o ID se pueden establecer, más fuentes).

{xtypo_download} Descarga Componente Phoca Fonts para Joomla 3.x {/xtypo_download}

Guardar

Cómo agregar fuentes de Google Fonts a plantillas Joomla