Trying to deploy NextJS app to Netlify, build fails because of fonts location

Question

I have 3 local fonts in public/fonts path in my Next JS project. When I try to deploy it to Netlify, it fails because it can't resolve modules for fonts.

This is what my layout.js looks like for fonts.

I am using latest NextJS version

 const glacialIndifference = localFont({
 src: [
 {
 path: "../../public/fonts/GlacialIndifference-Regular.otf",
 weight: "400",
 style: "normal",
 },
 {
 path: "../../public/fonts/GlacialIndifference-Italic.otf",
 weight: "400",
 style: "italic",
 },
 {
 path: "../../public/fonts/GlacialIndifference-Bold.otf",
 weight: "700",
 style: "normal",
 },
 ],
 variable: "--font-glacial",
});

This works locally, but fails when building on netlify.

Answer 1

try to make an assets folder outside of public /assets/fonts

and call

@font-face {
 font-family: "Font-name";
 src: url("path/font.otf") format("opentype");
 font-weight: normal;
 font-style: normal;
}

Answer 2

I'm not sure if it ́s the same with next.js, but in vite the path needs to be edited. The font is stored in public, but for some reason the path in the font-face needs to be written without public.

Change ../../public/fonts/GlacialIndifference-Regular.otf to ../../fonts/GlacialIndifference-Regular.otf