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.

Dato

Descargar fuentes gratuitas, no significa que puedas usarla libremente en tu sitio web. Muchas de ellas son solo para uso personal, lo que significa que no podrás lucrarte con su uso.

Dicho de otra manera, si vendes cursos en internet en tu plataforma Moodle, eso puede considerarse un uso comercial, por lo que deberás pagar por ellas si tienen esa restricción. Existen fuentes gratuitas que permiten usarla comercialmente, como las de licencia GPL o de dominio público.

Siempre lee los términos de uso para evitar conflictos. Las licencias que se otorgan, aun entre las fuentes pagas, pueden variar. Algunas permiten usarla en páginas web, posters, vallas, etc. mientras otras obligan a pagar más dinero dependiendo de la difusión que tendrán.

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

convertir fuente tipográfica para visualizar en navegador web

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

descargando fuente de transfonter

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.

carpeta de fuentes personalizadas en moodle

Tip
Sírvete de este guía si no tienes claro como subir archivos a Moodle por FTP. Si tienes cPanel, puedes hacerlo con el administrador de archivos.

Para saber que temas tienes habilitado actualmente, como administrador de Moodle ve a: Administración del sitio > Apariencia > Temas > Selector de temas. Ahí se mostrará: el que tiene la etiqueta Default.

Agregando código CSS

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

Nota
Deshabilita la caché en Moodle para que puedas ver 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.

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.

Guarda los cambios.

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

añadir código css para agregar fuente en moodle

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:

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

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.

Califica este artículo

Puntuación promedio 5 / 5. Votos: 1

No hay votos hasta ahora. Sé el primero en calificar esta publicación.

7 comentarios en “Cómo agregar fuentes personalizadas en Moodle”

  1. Hola, muy interesante tu blog.

    Quisiera hacerte una pregunta, estoy usando el tema “Academi” y quiero cambiar el color de las fuentes de naranja a negro.

    intento de la siguiente manera pero no lo logro

    body {
    color: black;
    }

    Que debo cambiar?

    Muchas gracias

    Responder
    • Hola Lautaro.

      No lo cambia ya que tienes selectores con mayor precedencia, como por ejemplo: .coursebox .content.

      Debes buscar el selector que quieras cambiar para aplicarlo, body es el más general.

      Por ejemplo, para el color del texto dentro de los cursos:
      .coursebox .content. {
      color: #000;
      }

      O el color de los vínculos:
      a {
      color: #ff0000;
      }

      Sustituye el código después del # con el color hex de tu preferencia.

      Espero te ayude.

      Responder
  2. Hola,
    Estoy usando el tema Clean, he seguidos los pasos de crear la carpeta en la raiz del tema, subidos los archivos de las fuentes e incluido el css en lso ajustes del tema:
    ___________________________
    @font-face {
    font-family: ‘AdiHaus’;
    url([[font:theme|AdiHaus-Regular.woff]]) format(‘woff’),
    url([[font:theme|AdiHaus-Regular.woff2]]) format(‘woff2’),
    url([[font:theme|AdiHaus-Regular.ttf]]) format(‘truetype’),
    font-weight: normal;
    font-style: normal;;
    }
    body{
    font-family:’AdiHaus’;
    }
    ___________________________
    ¿Tendria que declarar algo más?

    Responder
    • Hola Raúl.
      Es importante respetar el código que coloco en la guía para que pueda funcionar adecuadamente.
      Según lo que comentas: faltan algunas fuentes por cargar y te comiste los src 😉
      Siempre pruebo mis tutoriales desde cero antes de publicarlos y te aseguro que este funcionar perfectamente.
      Saludos.

      Responder

Deja un comentario

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.

Únete y recibe las últimas novedades en tu email.
Suscríbete a Evirtualplus
Suscríbete
política de privacidad
Acepto la
Suscríbete a Evirtualplus
Acepto la política de privacidad
Suscríbete
Suscríbete