Storybookのプレビュー画面にGoogleFontsを適用します。
next/font/google から必要なGoogleFontsをimportします。
それを、ラップするような形でexportすることで適用できます。
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;
