I have a project built with Angular 10 that utilizes SCSS for styling. In my _typography.scss file, I have defined some @font-face rules pointing to the font files located in the assets/fonts directory. However, when I run the application, the browser does not initiate any requests to fetch these font files.
Below is the structure of the styles directory:
https://i.stack.imgur.com/A9qnT.png
This is how my _typography.scss looks like:
@font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-Medium.ttf' format('truetype');
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-SemiBold.ttf' format('truetype');
font-style: normal;
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: 'Spartan';
src: 'assets/fonts/Spartan-Bold.ttf' format('truetype');
font-style: normal;
font-weight: 700;
font-display: swap;
}
I'm importing this file into my main styles.scss like so:
@import 'reset';
@import 'variables';
@import 'typography';
@import 'utilities';
body {
font-family: 'Spartan', 'Segoe UI';
font-weight: 500;
font-size: 0.75rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
Despite the import, only the system font Segoe UI is being used. The browser does not even attempt to download the font files:
https://i.stack.imgur.com/qEz85.png
I also tried preloading the fonts in my index.html, which did trigger requests from the browser, but the custom fonts were still not applied.
Any insights on why this might be happening?
P.S.: Here is the structure of my assets folder: