Scss font file not load into Angular project

61 views Asked by At

My font does not download and is not rendered in the DOM. I've already tested a lot of things, but this damn font isn't loaded. Thank you in advance for your help !

fonts.scss :

@font-face {
  font-family: Montserrat, sans-serif;
  src: url('../assets/fonts/Montserrat-Regular.woff2') format('woff2'),
  url('../assets/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montserrat-Medium, sans-serif;
  src: url('../assets/fonts/Montserrat-Medium.woff2') format('woff2'),
  url('../assets/fonts/Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Montserrat-SemiBold, sans-serif;
  src: url('../assets/fonts/Montserrat-SemiBold.woff2') format('woff2'),
  url('../assets/fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

styles.scss (span style is for the test) :

@import 'styles/fonts.scss';

span {
  font-family: Montserrat-SemiBold, sans-serif;
  font-size: 25px;
}

angular.json :

        "build": {
          "options": {
            "styles": [
              "src/styles/fonts.scss",
              "src/styles.scss"
            ],
            "scripts": []
          },

        "test": {
          "options": {
            "styles": [
              "src/styles/fonts.scss",
              "src/styles.scss"
            ],
            "scripts": []
          }

project structure :

project structure

Network console :

Network console

Console :

Console

0

There are 0 answers