next/font/google fonts with Storybook not showing up in local development #31984
Replies: 3 comments 2 replies
-
|
Hi @DarkstarXDD! I'm Dosu and I’m helping the storybook team. Your issue is likely caused by a bug that was fixed in Storybook 9.0.16 and vite-plugin-storybook-nextjs ^2.0.3. With Storybook 9.0.15, next/font/google integration with Vite can result in undefined font variables in local development, even though it works on Chromatic (which may use a patched or different environment) [source]. To resolve this, upgrade to at least Storybook 9.0.16 and vite-plugin-storybook-nextjs ^2.0.3. After upgrading, delete your node_modules and lockfile, then reinstall dependencies. Run If you still see issues, check for duplicate or conflicting versions of Next.js, vite-plugin-storybook-nextjs, and Storybook in your dependency tree. As a temporary workaround, you can import the Google Fonts stylesheet directly in References:
To reply, just mention @dosu. How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other |
Beta Was this translation helpful? Give feedback.
-
|
I tried what the bot above has suggested and tried the latest version: https://github.com/storybookjs/storybook/releases/tag/v9.1.0-alpha.7 Deleted my But my issue is still there. Wonder whether it's something wrong in my setup. But as I said it work fine when deployed to Chromatic. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @DarkstarXDD Thanks for reporting. Does your project file path contain any special characters or empty spaces? |
Beta Was this translation helpful? Give feedback.
-
|
Hey, thanks for taking a look. My project root is in a folder called If you are asking about the complete path where the project folder is located, then it's like below. It's the same folder structure I have always had for all my Vite or Next.js projects. I am on Windows 11. |
Beta Was this translation helpful? Give feedback.
-
|
The whole path indeed matters sometimes, since absolute paths are sometimes calculated. Can you try to remove temporarily empty spaces from your path and try once again? |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Edit: The GitHub repo if needed https://github.com/DarkstarXDD/storybook-playground
Hi, I am unable to get the proper fonts loaded inside Storybook in the local development setup. The fonts are available properly when I publish to Chromatic and on the builds happening on the Chromatic dashboard I see the font is properly applied.
But in my local dev setup (
npm run storybook) the font is not applied. I rannpm run build-storybookand checked the resulting static site it gives, and the fonts are not working on that either. I am confused how the same exact setup works only when deployed on the internet.I am using,
@storybook/nextjs-viteI searched around and came aross a setup where the font functions provided by
next/font/googleare imported into./storybook/preview.tsxand usedecoratorsto create a parent element that wraps all the stories. So I used that.The two discussion threads I got the above setup idea from:
#23039
#24456
Below is how it looks, but however, this doesn't work for me in the local development environment. It shows the
inter.variableorinter.classNameasundefinedinside the./storybook/preview.tsx. As I said, it works fine when deployed to Chromatic, but doesn't work on the local setup. I would like to know what I am doing wrong here. Thank you!Additional information
No response
Create a reproduction
No response
Beta Was this translation helpful? Give feedback.
All reactions