Para agregar fuentes personalizadas en Drupal 8, sigue los siguientes pasos:
1. Descarga la fuente personalizada que deseas utilizar y guárdala en tu equipo.
2. Crea un directorio en la ruta /themes/[nombre del tema]/css/fonts/ para almacenar la fuente personalizada.
3. En la carpeta de fuentes, agrega una hoja de estilo llamada fonts.css. Esta se utilizará para definir las fuentes personalizadas.
4. Abre la hoja de estilo y agrega las siguientes reglas CSS:
@font-face {
font-family: ‘nombre-de-la-fuente’;
src: url(‘ruta-a-la-fuente/nombre-de-la-fuente.eot’);
src: url(‘ruta-a-la-fuente/nombre-de-la-fuente.eot?#iefix’) format(‘embedded-opentype’),
url(‘ruta-a-la-fuente/nombre-de-la-fuente.woff2’) format(‘woff2’),
url(‘ruta-a-la-fuente/nombre-de-la-fuente.woff’) format(‘woff’),
url(‘ruta-a-la-fuente/nombre-de-la-fuente.ttf’) format(‘truetype’),
url(‘ruta-a-la-fuente/nombre-de-la-fuente.svg#nombre-de-la-fuente’) format(‘svg’);
font-style: normal;
font-weight: 400;
font-display: swap;
}
5. Reemplaza ‘nombre-de-la-fuente’ y ‘ruta-a-la-fuente’ con el nombre y la ruta donde guardaste la fuente personalizada.
6. Abre el archivo de configuración del tema (.info.yml) y agrega la siguiente línea:
libraries: – nombre-del-tema/nombre-de-la-libreria
7. Crea una carpeta llamada ‘lib’ en la raíz del tema y crea un archivo llamado ‘nombre-de-la-libreria.libraries.yml’.
8. Abre el archivo y agrega el siguiente código:
nombre-de-la-libreria: version: VERSION css: theme: css/fonts/fonts.css: {}
9. Reemplaza ‘nombre-de-la-libreria’ con el nombre que elegiste y VERSION con la versión de la librería.
10. Guarda los cambios y limpia la caché de Drupal.
Una vez que hayas seguido estos pasos, la fuente personalizada debería estar disponible para usar en tu tema. Puedes agregarla a través de CSS utilizando la propiedad font-family.
