Doesn't work in Storybook

[vercel]

Doesn't work in Storybook

[igorgladkoborodov]

Hi everyone. I used this workaround to make it work on my project:

1. Install and setup @storybook/nextjs as described here https://storybook.js.org/docs/8.0/get-started/nextjs

2. Setup staticDirs in .storybook/main.ts:

  staticDirs: [
    {
      from: "../node_modules/geist/dist/fonts/geist-sans",
      to: "/fonts/geist-sans",
    },
    {
      from: "../node_modules/geist/dist/fonts/geist-mono",
      to: "/fonts/geist-mono",
    },
  ],
};

3. Use localFont directly in .storybook/preview.tsx:

import localFont from "next/font/local";
import type { Preview } from "@storybook/react";

import "../src/app/globals.css";

const GeistSans = localFont({
  src: "../fonts/geist-sans/Geist-Variable.woff2",
  variable: "--font-geist-sans",
});

const GeistMono = localFont({
  src: "../fonts/geist-mono/GeistMono-Variable.woff2",
  variable: "--font-geist-mono",
});

const preview: Preview = {
  decorators: [
    (Story) => (
      <div className={`${GeistMono.variable} ${GeistSans.variable}`}>
        <Story />
      </div>
    ),
  ],
};

export default preview;

[AugustinMauroy]

same issue @BorisZubchenko have you found any solution ?

[BorisZubchenko]

Unfortunately, no. I've returned to Inter for now.

[AugustinMauroy]

ok thanks I'ill do that