January 26, 2025

Como instalar una fuente en Angular

Angular

Para usar esta fuente en tu proyecto Angular, sigue estos pasos:

1. Añade las fuentes al proyecto

Coloca las fuentes en una carpeta dentro de src/assets de tu proyecto, por ejemplo:

2. Declara las fuentes en un archivo CSS o SCSS

Ve a tu archivo principal de estilos (como styles.scss o styles.css) y utiliza la regla @font-face para registrar las fuentes. Por ejemplo:

@font-face {
  font-family: 'SpotifyMix';
  src: url('/assets/fonts/SpotifyMix/SpotifyMix-Regular.woff2') format('woff2'),
       url('/assets/fonts/SpotifyMix/SpotifyMix-Regular.woff') format('woff'),
       url('/assets/fonts/SpotifyMix-Regular.ttf') format('truetype');
  font-weight: 400; /* Regular */
  font-style: normal;
}

@font-face {
  font-family: 'SpotifyMix';
  src: url('/assets/fonts/SpotifyMix/SpotifyMix-Bold.woff2') format('woff2'),
       url('/assets/fonts/SpotifyMix/SpotifyMix-Bold.woff') format('woff'),
       url('/assets/fonts/SpotifyMix-Bold.ttf') format('truetype');
  font-weight: 700; /* Bold */
  font-style: normal;
}

@font-face {
  font-family: 'SpotifyMix';
  src: url('/assets/fonts/SpotifyMix/SpotifyMix-Light.woff2') format('woff2'),
       url('/assets/fonts/SpotifyMix/SpotifyMix-Light.woff') format('woff'),
       url('/assets/fonts/SpotifyMix-Light.ttf') format('truetype');
  font-weight: 300; /* Light */
  font-style: normal;
}

3. Usa la fuente en tu CSS

Aplica la fuente al body o a los elementos que desees estilizar. Por ejemplo:

body {
  font-family: 'SpotifyMix', Arial, sans-serif;
}

h1 {
  font-family: 'SpotifyMix';
  font-weight: 700; /* Bold */
}

p {
  font-family: 'SpotifyMix';
  font-weight: 300; /* Light */
}

4. Verifica en Angular

Asegúrate de que la fuente está cargada correctamente en la carpeta src/assets, ya que el navegador cargará las fuentes usando rutas relativas.

Si no funciona, verifica que el archivo angular.json tiene el siguiente fragmento para incluir styles.scss o styles.css:

"styles": [
  "src/styles.scss"
]

Con esto, las fuentes deberían aplicarse correctamente en tu proyecto. Si tienes problemas, verifica las rutas o abre las herramientas de desarrollo del navegador (DevTools) para confirmar que las fuentes se cargan correctamente.

Written by Pol Valle

I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.