En un artículo anterior te mostré cómo 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.
Comenzaré haciendo una aclaratoria, los dos métodos para agregar tipografías permiten tener fuentes personalizadas.
La diferencia estriba en que:
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.
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.
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:
font-family: 'Roboto', sans-serif; font-family: 'Open Sans', sans-serif;
Estos serían los códigos para cargar las fuentes Roboto o Open Sans.
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.
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:
body {
font-family: 'Open Sans', sans-serif;
}
Si deseas personalizar la tipografía en los títulos y subtítulos, el código sería:
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', sans-serif;
}
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.
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.
Ver comentarios
Hola intenté hacerlo pero cuando doy guardar cambios en el HtmL me sale error "A potentially unsafe operation has been detected in your request to this site" y no me deja. A que se debe esto? Gracias.
Hola Kta.
Este tipo de errores pasa por lo general por problemas de permisologia en el servidor que aloja Moodle.
Te recomiendo contactar con el soporte del mismo.
Saludos.
En mi caso sólo deseo cambiar la fuente de un curso en particular, sólo de un curso. Cómo puedo hacer??
Hola Claudia.
No lo he intentado antes, pero la manera mas sencilla (que conozco) es usando CSS a el curso que desees, y para ello hay que estar en la plataforma y hacerlo de manera personalizada.
Lamento no ser de mas ayuda.
Saludos.