Temas de Moodle basados ​​en Boost: cómo alojar Google Fonts localmente (sin utilizar la API de Google Fonts)

¿Quiere usar Google Fonts gratis en su sitio de Moodle pero le preocupan las regulaciones europeas de GDPR? Si está utilizando el tema de Moodle Boost o un tema basado en Boost, puede seguir los pasos de este tutorial para alojar localmente las fuentes de Google que desee para evitar posibles problemas de cumplimiento de GDPR.

Paso 1: deshabilite la API de fuentes de Google

Si el tema de Moodle utilizado por su sitio ya utiliza la API de Google Fonts para cargar fuentes desde el servidor de Google, primero debe deshabilitar la API.

Agregamos la capacidad de deshabilitar la API de Google Fonts en nuestro último tema de Moodle Edutor and Maker. Todo lo que necesita hacer es ir a la configuración del tema y desmarcar una casilla en la sección Configuración general.

Paso 2: descarga las fuentes de Google

Vaya a la herramienta en línea Google Web Fonts Helper y cargue las fuentes que desea usar en su sitio de Moodle.

Para propósitos de demostración, hemos elegido MD sin como fuente principal de nuestro sitio Moodle y Terco como fuente de título.

Paso 3 - Aloja las fuentes de Google

Crear una carpeta llamada fonts en su carpeta de temas de Moodle en su servidor y cargue los archivos de fuentes descargados en esta carpeta.

Paso 4: agregue Google Fonts a su sitio

Vaya a la página de configuración de su tema y busque el SCSS/CSS personalizado sección. Impulso-T

En el SCSS inicial sin procesar campo de entrada agregar código de definición de fuente.

/* dm-sans-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url([[fonts:theme|dm-sans-v13-latin-regular.woff2]]) format('woff2');
}


/* mulish-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  src: url([[fonts:theme|mulish-v12-latin-700.woff2]]) format('woff2');
}

En el SCSS crudo campo de entrada agregue su código css personalizado para asignar las fuentes a los elementos de página relevantes.

body {
    font-family: 'DM Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Mulish', sans-serif;
}