0

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

DLx
  • 97
  • 1
  • 13
  • Why don't u use google fonts? https://fonts.google.com/specimen/Montserrat and add it in index.html like – D A Jun 23 '23 at 11:47
  • It's a workaround, but this method has worked on my other projects, and I'd like it to continue to work like this. Besides, I'm noticing that the images I put in the assets/images folder aren't loading either... – DLx Jun 23 '23 at 11:52
  • 2
    Double-check your `angular.json` - are you sure src/assets is being included in the assets? You only show the `styles` part of the file. – TotallyNewb Jun 23 '23 at 11:55
  • for the assets its ok now, I had put this "src/assets/*" to test with my fonts but I had forgotten to put back "src/assets" as before. – DLx Jun 23 '23 at 12:01
  • Ok, I took another look and I think your path might be wrong. IIRC relative paths are resolved based on the location of the final compiled css file. And your main entry point `styles.scss` is one level higher in directory tree. Try dropping the `..` part, or alternatively use absolute paths. Or move your `styles.scss` into `styles` directory and update the angular.json to match those changes. I think either should work. – TotallyNewb Jun 23 '23 at 12:32
  • Thanks for your reply, neither of them work... – DLx Jun 23 '23 at 12:43

0 Answers0