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.

Escrito por Pol Valle

Me interesa especialmente desarrollar aplicaciones que no solo sean funcionales, sino también atractivas y fáciles de usar. Lo consigo aplicando principios SOLID, arquitectura limpia y testing para garantizar la calidad.

@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; }