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/assetsde tu proyecto, por ejemplo:
2. Declara las fuentes en un archivo CSS o SCSS
- Ve a tu archivo principal de estilos (como
styles.scssostyles.css) y utiliza la regla@font-facepara 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.jsontiene el siguiente fragmento para incluirstyles.scssostyles.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'm particularly drawn to building apps that are not only functional but also visually appealing and easy to use. I do it by applying SOLID principles, clean architecture and testing to ensure quality.