Next.js Discord

Discord Forum

Using /next/font/local with Storybook

Unanswered
Crazy ant posted this in #help-forum
Open in Discord
Crazy antOP
Hi! I have a big monorepo with many packages. I have some local fonts that are loading fine in the Next.js app, but when I try to import those fonts in Storybook, my browser tries to get them from:

localhost:6006/Users/myname/myproject/packages/mytheme/src/fonts

I've followed the Storybook docs staticDir mapping(1), but I suspect the real problem is that Next's localFont helper is providing an absolute path on my local machine, and Storybook is taking that and expecting to find it in a static assets directory.

I can create that big long path in the static assets directory, but that obviously won't work for other developers on this project.

Anyone run into this or have any tips? (For what it's worth, this is my first time in this ecosystem and I'm lacking understanding of how Next's localFont helper actually works.)

(1): https://storybook.js.org/docs/get-started/frameworks/nextjs#staticdir-mapping

0 Replies