Next.js Discord

Discord Forum

Next can't resolve the font files in my public folder. What am I missing?

Unanswered
Satin Angora posted this in #help-forum
Open in Discord
Satin AngoraOP
First, my project is using app architecture. I have two local fonts, in .ttf format, inside the public folder in the path public/fonts/Poppins-Regular.ttf and public/fonts/Poppins-Bold.ttf.

I reference the fonts from layout.tsx inside app folder by; 
const poppins = localFont({
  src: [
    {
      path: "/fonts/Poppins-Regular.ttf",
      weight: "400"
    },
    {
      path: "fonts/Poppins-Bold.ttf",
      weight: "700"
    }
  ],
  display: "swap",
  variable: "--font-poppins"
})


When I reference variable in my global.css file and run the project in dev mode, I get the error 
https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/next/font/local/target.css?{"path":"src\\app\\layout.tsx","import":"","arguments":[{"src":[{"path":"/fonts/Poppins-Regular.ttf","weight":"400"},{"path":"fonts/Poppins-Bold.ttf","weight":"700"}],"display":"swap","variable":"--font-poppins"}],"variableName":"poppins"}


What am I doing wrong? I don't want to use Google Fonts API.

10 Replies

Blanc de Hotot
You can download poppins stylesheet and reference to it locally like this:
Satin AngoraOP
@joulev Oh, I understand now. When I use relative path, it loads. TY.
@Blanc de Hotot Then where do you put font files.
Blanc de Hotot
Or, if you don't want to do any request what so everm you can download the woff2-files
Satin AngoraOP
Also is there a production tested project structure I can use? Now I read the documentation again, and it says public folder is optional. It was just causing confusion anyway.
@Blanc de Hotot Amazing! Thank you for the idea
Blanc de Hotot
It's all based on different taste. My approache works best for me. Do you want to see it?
Satin AngoraOP
If you can share it with me, it would immensely help. I'm trying to build a good structure for myself.