Font-family is loaded and set, but the style is not applied.

[marcosfromrio]

I added next-fonts to be able to insert filesystem fonts into my scss file, but the style is not being applied.

Here is a print of the font being loaded: https://i.imgur.com/eiQWPp0.png

Here is my code that applies the style:

h1,
h2,
h3,
h4 {
    font-family: "Ubuntu";
}

Here is the font definition code:

@font-face {
    font-family: "Ubuntu";
    src: url("./fonts/Ubuntu/Ubuntu-Regular.ttf");
}

Here is a print of the font being applied normally: https://i.imgur.com/Z7YsxhH.png

And here a print of the titles (h1, h2...) without the Ubuntu font style: https://i.imgur.com/JBrBk46.png

I had a problem before, and it was because I was adding format here: url(". / .....") format ("ttf")

now i remove and add this for test both but none of this works.

The sass code:

@font-face {
  font-family: "Ubuntu";
  src: url("./fonts/Ubuntu/Ubuntu-Regular.ttf");
}

h1,
h2,
h3,
h4 {
  font-family: "Ubuntu";
}

the font original path is changed, ut this apply the new path in a style tag too:

@font-face {
  font-family: "Ubuntu";
  src: url(/_next/static/media/Ubuntu-Regular.fa02e22385da5600c6d666df22db9154.ttf);
}

PS: when i add the google font link the style is applied normally

[benedfit]

I'm having the same issue when using relative paths. The files in /_next/static/media, aren't actually font files, but are instead JS files that export the font files from /_next/static/chunks. The solution to get around this is to use Next's built-in static file service

[rohanray]

@flakesrc : Please can you test the new version 1.1.0 and report. Thanks -RR

[rohanray]

This should be fixed now. Please see https://next-fonts-local-example.now.sh/ for a live demo

Please upgrade next-fonts package to 1.1.0. Thanks -RR

[benedfit]

Works perfectly!