Como agregar fuentes tipográficas Google Fonts en Moodle

En un artículo anterior te mostré como agregar tipografía personalizada en Moodle. Este método permite tener flexibilidad al poder insertar cualquier fuente, independientemente del repositorio o librería online donde se encuentre.

En este post voy a darte más opciones, ya que te mostraré como agregar soporte para las archifamosas 🤩 Google Fonts en Moodle. Con ella podrás tener a tu disposición de manera rápida y sencilla, cientos de fuentes con sólo unas pocas líneas de código. Perfecto para los usuarios que no les gusta complicarse la vida.

Importante
Deshabilita la caché en Moodle para que puedas observar los cambios que hagas.

Para ello en: Administración del sitio > Apariencia >Temas > Ajustes de temas, marca la casilla Modo de diseño de temas. Al finalizar los cambios, haz el proceso contrario para habilitarla.

Fuentes personalizadas vs Google Fonts

fuentes personalizadas vs google fonts

Comenzaré haciendo una aclaratoria, los dos métodos para agregar tipografías permiten tener fuentes personalizadas.

La diferencia estriba en que:

  • Con el primero, las alojas en tu servidor, debiendo convertirlas manualmente a los formatos aptos para visualizarlas en la web.
  • Con el segundo, haces uso del repositorio de fuentes de Google, llamado Google Fonts, donde con unas simples líneas de código y sin conversiones, puedes personalizar tu plataforma Moodle.

Los dos métodos tienen sus ventajas y desventajas.

Alojándolas en tu servidor, tienes rapidez y prácticamente todo el abanico de fuentes que estén disponibles en el mundo. Por contra, es más complejo (a muchos usuarios noveles puede parecerle difícil), debiendo adquirir las licencias necesarias en caso de que no sean tipografías libres.

Añadiéndolas con Google Fonts, tu Moodle irá algo más lento, ya que funciona cargándolas desde los servidores de la gran G; además está limitada a las fuentes disponibles en este repositorio, que en la actualidad cuentas con más de 800.

La ventaja de Google Fonts las mencioné antes y se resumen en: gratuito y sencillo 😁

En lo particular, recomiendo hacer uso de Google Fonts, y si hay alguna fuente en especial quieras y no esté disponible, hagas uso del otro método. Aunque con la gran variedad que tiene Google Fonts, es bastante probable encuentres la que se adapta a ti.

Buscando la fuente para tu Moodle en Google Fonts

Lo primero que debes hacer es ubicar la tipografía que quieras agregar del repositorio.

Dirígete a Google Fonts desde aquí. Escoge entre toda la variedad, la(s) fuente(s) que quieras tener en tu plataforma. Con el ícono de + ubicado en la parte superior derecha del título de la tipografía, las vas agregando a la lista de selecciones, la cual se mostrará en la parte inferior de la pantalla.

Tip
Es recomendable no cargar demasiadas para no ralentizar innecesariamente nuestro Moodle. Con dos o tres, debería ser suficiente. Yo uso una para el contenido y otra para los títulos.

Terminada la selección, haz clic a la barra inferior que contiene la lista de fuentes que agregaste. En la pestaña Customize  puedes escoger el grosor, también si las quieres itálicas.

Para finalizar, ve ahora a la pestaña Embed y copia el código HTML que se encuentra debajo del apartado Standard. Este código es el que agregaremos en Moodle, el cual hará el llamado a las fuentes para que se carguen en tu sitio.

escoger las fuentes tipográficas en google fonts gif animado

En el apartado Specify in CSS, podrás observar el código CSS para agregar las fuentes. Tenlo a la mano, ya que lo necesitaremos también para este tutorial.

Por ejemplo:

Estos serían los códigos para cargar las fuentes Roboto o Open Sans.

donde se ubica el código css google fonts para agregar fuentes en Moodle

Agregando el código Google Fonts en Moodle

Entra como administrador en Moodle y ve a: Administración del sitio > Apariencia > HTML adicional.

En el espacio en blanco etiquetado Dentro del Encabezado, agrega el código HTML que copiamos antes.

código html adicional para agregar google fonts en moodle

Guarda los cambios.

Ahora solo resta agregar el código CSS para asignar las fuentes a Moodle.

Esto lo hacemos en Administración del sitio > Apariencia  > Nombre del tema, en el campo CSS Personalizado.

En el tema Boost, el código CSS lo colocamos en Administración del sitio > Apariencia  > Boost, pestaña Advanced settings, campo Raw SCSS.

Por ejemplo, si quisieras cambiar la fuente de todos los textos de Moodle, incluido el contenido,  nuestro CSS sería:

Si deseas personalizar la tipografía en los títulos y subtítulos, el código sería:

El código que va dentro de los corchetes, es el que estaba disponible en Specify in CSS de Google Fonts que te mencioné antes. Cuida de respetar los espacios y corchetes para que todo salga bien.

código css de google fonts para insertar en moodle

No olvides Guardar los cambios.

Con esto ya tendremos nuestro Moodle personalizado con fuentes tipográficas de Google Fonts.

Espero te ayude este artículo. No olvides dejar tu aporte en los comentarios, estos me ayudan mucho. Saludos.

Como agregar fuentes tipográficas Google Fonts en Moodle
Califica este articulo
Diógenes Mata

Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

TAMBIÉN TE PODRÍA INTERESAR

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

El responsable de este sitio web es Marit Acuña. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.