StorybookでGoogleFontsを設定する

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;

よかったらシェアしてね！