Cómo agregar fuentes personalizadas en Moodle

Las fuentes tipográficas son muy importantes dentro de una web, si son difíciles de leer o poco agradables a la vista, podemos arruinar la experiencia del uso; tus visitantes saldrán corriendo 😂

Si además nuestra web está orientada a un entorno educativo, resulta crucial elegir la correcta: tus estudiantes y facilitadores pueden pasar horas leyendo contenido; la tipografía juega un papel importante para mantener la atención y no cansar tanto la vista.

Debido a ésto, es muy posible que desees usar una fuente personalizada para tu Moodle, bien sea descargadas desde repositorios de internet o una especialmente diseñada para tí.

En este artículo te enseñaré a añadir fuentes tipográficas personalizadas en Moodle, de manera sencilla y práctica para que las tengas funcionando en muy poco tiempo.

Donde obtener fuentes tipográficas personalizadas

Existen infinidad de sitios web desde donde puedes obtener fuentes personalizadas, bien sea gratis o de pago. Solo basta con poner en Google: fuentes personalizadas o fonts (por su palabra en inglés) y obtendrás cientos de resultados.

DaFont o 1001 free fonts son un buen comienzo.

Si buscas un repositorio de fuentes más exclusivas (Premium) para tu proyecto y puedes permitirte pagar por ellas, MyFonts o Lynotype te pueden ayudar.

Los formatos más comunes de fuentes personalizadas para descargar en tu computadora son TrueType o OpenType. Estas, deberemos transformarlas en formatos aptos para mostrarse en los navegadores web, como te explicaré a continuación.

Convertir fuentes personalizadas para usar en la web

Una vez tengas tu fuente(s) tipográfica(s), vamos a transfórmala en formatos que permitan su visualización en los navegadores como Chrome o Firefox.

Existen varias formas de hacerlo, en esta guía usaremos el servicio online gratuito Transfonter.

1. Dirígete a la web desde aquí.
2. Con el botón Add Fonts, ubica la fuente en tu computadora y cargala. Espera que se suba a la página.
3. Marca las casillas TTF, EOT, WOFF, WOFF2 y SVG en el campo Formats.
4. Haz clic al botón Convert

Cuando finalice la transformación de la fuente, descargarla con el vínculo Download que se mostrará.

En el archivo .ZIP tendrás todos los tipos de la fuentes personalizadas que necesitarás para agregarla a Moodle.

Descomprime el archivo. Puedes borrar stylesheet.css y demo.html, ya que no los necesitaremos para este tutorial.

Agregando las fuentes tipográficas en Moodle

Ahora debemos subir las fuentes personalizadas que están en el archivo Zip con el formato TTF, EOT, WOFF, WOFF2 y SVG al servidor web donde se encuentra el Moodle.

Ubícate en la carpeta de publicación de Moodle. Una vez allí, debemos dirigirnos al directorio theme y posteriormente al tema que usamos actualmente. Por ejemplo: clean o boost.

Dentro, crearemos una carpeta que llamaremos: fonts. Aquí copiaremos los formatos de fuentes que obtuvimos anteriormente.

Agregando código CSS

Ahora vamos a conectar mediante código CSS las fuentes personalizadas al Moodle.

Logueate como administrador en Moodle y dirígete a: Administración del sitio > Apariencia > Temas > nombredeltema. Copia el siguiente código en el campo CSS personalizado.

@font-face {
  font-family: 'nombrefuente';
  src: url([[font:theme|nombrefuente.eot]]);
  src: url([[font:theme|nombrefuente.eot]]) format('embedded-opentype'),
       url([[font:theme|nombrefuente.woff]]) format('woff'),
       url([[font:theme|nombrefuente.woff2]]) format('woff2'),
       url([[font:theme|nombrefuente.ttf]]) format('truetype'),
       url([[font:theme|nombrefuente.svg]]) format('svg');
  font-weight: normal;
  font-style: normal;
}

Guarda los cambios.

Sustituye nombrefuente  por el nombre que tengan tus archivos de fuentes (antes de la extensión). Por ejemplo: Gravity-Regular

Si tienes el tema Boost, el código CSS debes agregarlo en la pestaña Advanced settings > Raw SCSS.

Dando estilo a tus fuentes en Moodle

Con lo anterior, tu fuente personalizada estará disponible en Moodle para que puedas agregarlo en tus cursos. Dependerá de tus necesidades y lo que quieras hacer en la plataforma, el lugar donde implementarlo.

Para ello, haremos uso de código CSS. Lo agregarás en el campo CSS personalizado o Raw SCSS, dependiendo del tema, como hicimos con anterioridad.

Por ejemplo, si quieres que se muestre tu fuente personalizada en todo contenido de Moodle, agrega esto:

body {
  font-family: nombrefuente;
}

Otra implementación interesante, sería modificar el tipo de fuente que se muestra en los títulos:

h1, h2, h3, h4, h5, h6 {
  font-family: nombrefuente;
}

Recuerda cambiar nombrefuente  por el nombre de tu fuente personalizada.

Puedes subir tantas tipografías quieras y utilizarlas en diferentes sitios de tu Moodle. Aunque debes tener cuidado de no exagerar 😁, con dos o tres fuentes contrastadas debería ser suficiente.

Con ésto terminamos este corto pero sencillo post, que seguro será de mucha utilidad en tu plataforma educativa.

Si tienes dudas, la caja de comentarios te está esperando 👇. Saludos.