How to import NextJS font and use it for all stories #24456
-
|
Hi, Storybook community, First of all, thank you so much for creating this components cloud, It helped me a lot to start creating my own library. I'm working on a NextJS project where I start extracting and categorizing the components in a special folder called The setup worked well and I started creating my stories, however, I want to use the font I use in the Inter app. In my app, I import the font from NextJS fonts like this : import "@/globals.css"
import { Inter } from "next/font/google"
import "normalize.css"
import { Providers } from "@/redux/provider"
import { metadata } from "./meta"
const inter = Inter({ subsets: ["latin"], weight: ["500", "600", "700", "800", "900"] })
export { metadata }
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='de'>
<head>
<link rel='icon' href='/favicon.ico' sizes='any' />
</head>
<body className={inter.className}>
<Providers>{children}</Providers>
</body>
</html>
)
}However, in my stories I could not find a way to import and use that font once instead of importing it and using it in each story. Like this: import type { Meta, StoryObj } from "@storybook/react"
import { Inter } from "next/font/google"
import { Modal } from "./Modal"
const meta: Meta<typeof Modal> = {
component: Modal,
}
export default meta
type Story = StoryObj<typeof Modal>
const inter = Inter({ subsets: ["latin"] })
export const Small: Story = {
render: () => <Modal className={inter.className} title='Your modal title goes here' />,
}
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Are you familiar with the concept of having a preview.js file? Something like below should do the trick: // .storybook/preview.tsx
import React from 'react';
import { Preview } from '@storybook/react';
import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"], weight: ["500", "600", "700", "800", "900"] })
const preview: Preview = {
decorators: [
(Story) => (
<div className={inter.className}>
<Story />
</div>
),
],
};
export default preview; |
Beta Was this translation helpful? Give feedback.
-
|
Yes. Thank you so much <3 |
Beta Was this translation helpful? Give feedback.
Are you familiar with the concept of having a preview.js file?
In combination with decorators, you can achieve the same like what you are actually doing in your Next.js app.
Something like below should do the trick: