Issue with font-face while using sass

I'm using SCSS to process my CSS and the 7–1 structure variant with fewer folders. Here's a screenshot

The @forward and @use are set up correctly as I can see the final CSS getting updated accordingly.

The _font-face.scss contains the following code

/* alegreya-sans-regular - latin */
@font-face {
    font-family: "Alegreya Sans";
    src: url("assets/fonts/alegreya-sans-v24-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
}

/* alegreya-sans-900 - latin */
@font-face {
    font-family: "Alegreya Sans";
    src: url("assets/fonts/alegreya-sans-v24-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    font-style: normal;
    font-weight: 900;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
}

The content gets added correctly to the final main.css file.
And the path, as you can see from the screenshot, is correct.

The main.scss which is the one that compiles to the final main.css contains

@use "abstracts" as a;
@use "base" as b;
@use "layout" as l;
@use "components" as c;

p {
    font-family: "Alegreya Sans", sans-serif;
}

This part of the code get also added correctly to the final main.css

When I open the project in the browser from Pycharm, and check with the inspector, it recognizes that it should use the Alegreya Sans. Instead, it renders with Arial, and further checks show that it cannot find the font, because it starts the search within the CSS folder even though the CSS folder is not mentioned in the path inside the font-face.

Instead of using my path from the font-face declaration, which is assets/fonts/font-name, it uses name-of-the-project/css/assets/fonts/font-name causing the error. I tried a lot, but no matter how I structured the project, it kept wanting to search inside the CSS folder.

The only setting I can think of that is pointing to the CSS folder is the file-watcher for compiling my SCSS, which looks like this

Could this be the problem? And if it is, how can I have my final CSS going to the CSS folder without having this issue?

 

Also, putting the fonts inside the CSS folder works fine.

0
1 comment

The browser resolves paths like assets/fonts/font-name relative to the current file (.css in your case), and the .css files reside in <project dir>/css folder and thus have the http://localhost:63342/<project name>2/css/<file name>.css URL. As a result, the computed URL of the font files is http://localhost:63342/<project name>2/css/assets/fonts/font-name

 

To solve the problem you can either change the url() in your .scss file to a path relative to generated .css file or put all your font files in the css folder. 

1

Please sign in to leave a comment.