How to connect the imported fonts in SASS?

[kazooi]

Hi there,

when I added folders to my Sass files then the links to my fonts broke up. I save my fonts in a file called _typography.scss and inside it looks like this:

@font-face {
  font-family: 'Font1';
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/NDGambit/NDGambitExtraBold.woff2) format('woff2'),
    url(/fonts/NDGambit/NDGambitExtraBold.woff) format('woff');
}

@font-face {
  font-family: 'Font2';
  font-style: bold;
  font-weight: 700;
  src: url(/fonts/NDGambit/NDGambitExtraBold.woff2) format('woff2'),
    url(/fonts/NDGambit/NDGambitExtraBold.woff) format('woff');
}

...

When I added this file to a seperate folder then the fonts doesnt show up, even when I corrected the fonts path. The path to the font si correct, but I may have missed something to import these fonts into the other scss files?

The Error shows like this:

 hot-dev-client.js:88:24
downloadable font: download failed (font-family: "CeraPro-Medium" style:normal weight:700 stretch:100 src index:0): status=2147746065 source: http://localhost:3000/fonts/CeraPro/CeraPro-Medium.woff
downloadable font: download failed (font-family: "RobotoMono-Regular" style:normal weight:400 stretch:100 src index:0): status=2147746065 source: http://localhost:3000/fonts/RobotoMono/RobotoMono-Regular.woff
downloadable font: download failed (font-family: "CeraPro-Bold" style:normal weight:800 stretch:100 src index:0): status=2147746065 source: http://localhost:3000/fonts/CeraPro/CeraPro-Bold.woff

Can some one let me know how to use custom fonts within a folder structure in SASS?

Mixing ??

[lasjorg]

Are you saying they worked before you moved the file? If so, it sounds like a path issue.

We have to know your folder structure and how you are using the partials. I’d suggest you create a repo and link to it.

[kazooi]

@lasjorg sorry for my late reply and thank you for your answer!

I checked that path to the font file and it is correct (VSCode sowed me the folder structure and I checked it myself). The wired thing is that just the custom fonts can not be found, but the other styles are applyed correctly.

This is the error message I get:

The folder structure looks like this:

The main.scss file (and the connection to the other files) looks like this:

The _typographie.scss file looks like this:

The path to the font folder should be correct as I got the path suggestion from VSCode. However, I can see that the other styles loaded correct, just the custom fonts can not be found. Can anyone help please??

Here you can download the repo

Thanks for help!!

[lasjorg]

Move the fonts folder into the public folder and it should work (you didn’t mention it was a Next.js app)

[kazooi]

Thanks a lot for your help, it works now!

I did not know that the fonts folder should always be in the public folder in Next js…

I was also wondering that when I change the path to the file like this:

src: url(/public/fonts/CeraPro/CeraPro-Bold.woff) format('woff');

then the font files are not connected, even when this is the actual path to the font (which also shows me the VSCode editor).

It just works with this path:

src: url(/fonts/CeraPro/CeraPro-Bold.woff) format('woff');

Is it common practice that the public folder will be ignored by Next js?

[lasjorg]

It is just how they handle static file serving (much like create-react-app).

@kazooi

Is it common practice that the public folder will be ignored by Next js?

What do you mean by ignored?

You reference files/folders in the public folder using /. It is just part of the build/serving process. Otherwise, you have to import the resources.

[kazooi]

@lasjorg

What do you mean by ignored?

I mean exactly what you described, it is some kind of shortcode which is used by Next. js so that the public folder does not need to be named in the path, a simple / indicates that we are in the public folder.

Thank you

[lasjorg]

I wouldn’t call that being ignored. It’s just / is the root and the public folder will be inside the the root folder.