Cómo añadir fuentes externas (Google Fonts ) en Drupal 8/9

Instrucciones

Para añadir fuentes externas (Ej.: Google fonts) en tu subtheme sigue estos pasos:

  1. Crea un subtema partiendo de un tema base como Bootstrap Barrio
     
  2. Abre el archivo "TUSUBTHEME.libraries.yml" y añade al final del archivo y respetando los espacios, el código que está debajo.
     
  3. A continuación abre el archivo "style.css" y añade al principio de todo este código:

    /*=================================
              GLOBAL STYLES
    ==================================*/
    body, html {
      font-family: 'Caladea', serif;
      height: 100%;
    }
     

  4. Abre el archivo "TUSUBTHEME.info.yml" y busca la siguiente línea para añadir el nombre de la fuente que haz añadido

    name: TUSUBTHEME type: theme description: 'Basic structure for a Bootstrap Barrio SubTheme.' core: 8.x core_version_requirement: ^8 || ^9 base theme: bootstrap_barrio libraries: - TUSUBTHEME/bootstrap_cdn - TUSUBTHEME/global-styling - TUSUBTHEME/caladea

  5. Refresca caché.
Código
caladea:
  css:

    base:

      'https://fonts.googleapis.com/css2?family=Caladea:ital@1&display=swap': { external: true }

Snippet relacionados