Open brgndyy opened 1 month ago
Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue with local fonts in Storybook for Next.js 14, follow these steps:
Update main.ts
:
staticDirs
path is correct:
staticDirs: [
{ from: '../src/components/fonts', to: '/fonts' },
],
Configure Webpack:
webpackFinal
:
config.module?.rules?.push({
test: /\.(ttf|woff|woff2|eot|otf)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
});
Update Font Import Path:
font.ts
is correct:
export const myFont = localFont({
src: '/fonts/BMHANNAAir_ttf.ttf',
display: 'swap',
});
Use Font in Storybook:
export const decorators = [
(Story) => (
<div className={myFont.className}>
<Story />
</div>
),
];
These steps should resolve the font loading issue in Storybook.
/code/frameworks/nextjs/src/font/webpack/loader/local /code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx /code/frameworks/nextjs/src/font/webpack /code/frameworks/nextjs/src/font/webpack/loader /code/frameworks/nextjs/template/stories_nextjs-default-js /code/frameworks/nextjs/src/font/webpack/configureNextFont.ts /test-storybooks/portable-stories-kitchen-sink/nextjs/stories/fonts /code/core/src/server-errors.ts /code/frameworks/nextjs/src/font/babel/index.test.ts /code/frameworks/nextjs/src/font/webpack/loader/utils /code/core/src/preview-errors.ts /.github/DISCUSSION_TEMPLATE/help.yml /docs/configure/webpack.mdx /test-storybooks/portable-stories-kitchen-sink/nextjs/.storybook /test-storybooks/portable-stories-kitchen-sink/nextjs/stories /test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Font.tsx /code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts /.github/comments/invalid-link.md /code/frameworks/nextjs/template/stories_nextjs-default-js/fonts /code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts /test-storybooks/portable-stories-kitchen-sink/react/.storybook /code/lib/cli/src/link.ts /docs/_snippets/web-components-webpack5-add-framework.md /code/addons/onboarding/package.json /code/frameworks/nextjs/template/cli/ts-4-9
Describe the bug
Summary
Hello, I am currently using Next.js14 version.
I applied the localFont application method as written in the official document, but the error as shown in the picture continues to occur.
Is the path wrong? Even though I followed the same path as the official document, an error occurred and I don't know where the error is.
Currently, the font is applied normally within the application, but the error occurs only in storybook.
src/components/fonts/font.ts
Additional information
- main.ts
- preview.tsx
Create a reproduction
No response
Reproduction link
https://github.com/brgndyy/BEING_JAZZER/blob/main/front/.storybook/main.ts
Reproduction steps
No response
System
Additional context
No response