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

Descripción
Descripción

Este código te permitirá añadir Google Fonts en tu tema personalizado o "Subtheme" Drupal 8/9.

Puedes consultar la Página oficial de Drupal

 Para elegir otra fuente desde la página de google fonts:

  1. Visita la página oficial de Google fonts
     
  2. Haz clic en el nombre de la fuente que deseas instalar.

    Snippet | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

     

  3. En la siguiente pantalla selecciona el estilo, luego marca la pestaña embed que está arriba a la derecha y copia los valores para sustituirlos en los archivos dentro de TUSUBTHEME correspondientes en cada caso.

    Snippet | www.drupaladicto.com - Consultor especializado en Drupal y Symfony

 

Instrucciones
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 }