Apply GoogleFonts to the Storybook preview screen.
Import the required GoogleFonts from next/font/google.
You can then apply them by exporting them in a wrapped form.
import { Preview } from '@storybook/your-framework';
import { Noto_Serif_JP } from "next/font/google";
const NotoSerifJPFont = Noto_Serif_JP({ weight: "400", subsets: ["latin"] });
const googleFontsDecorator = (Story) => {
return (
<>
<style jsx global>{`
html {
font-family: ${NotoSerifJPFont.style.fontFamily};
}
`}</style>
<Story />
</>
);
};
export const decorators = [googleFontsDecorator];
const preview: Preview = {
parameters: {},
};
export default preview;