Doesn't work in Storybook

[boar-is]

Font Name (Geist Sans/Geist Mono):

• Geist Sans
• Geist Mono

Description of the Issue:
Importing the font into Storybook breaks it. Importing fonts via next/font works fine, however.

Steps to Reproduce:

1. Create a Next app with Storybook
2. Create a rootCss variable

import { GeistMono } from 'geist/font/mono'
import { GeistSans } from 'geist/font/sans'

import cs from '~/app/_lib/react/cs' // a utility to join classes

const rootCss = cs(
  GeistSans.variable,
  GeistMono.variable,
  'text-foreground max-w-full bg-background font-sans antialiased',
)

export default rootCss

3. Use it in Storybook's preview:

import type { Preview } from '@storybook/react'

import '~/app/globals.css'

const preview = {
  decorators: [
    (Story) => <div className={rootCss}><Story/></div>
  ],
  // ...
} satisfies Preview

export default preview

4. Have an error:

next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function
TypeError: next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function
    at ./node_modules/.pnpm/geist@1.2.0_next@14.0.4/node_modules/geist/dist/mono.js (http://localhost:6006/vendors-node_modules_pnpm_babel_runtime_7_23_5_node_modules_babel_runtime_helpers_esm_defineP-4ea83d.iframe.bundle.js:19620:73)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:301:21)
    at ./app/_lib/react/root-css.tsx (http://localhost:6006/main.iframe.bundle.js:593:73)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:301:21)
    at ./.storybook/decorators/theme/index.tsx (http://localhost:6006/main.iframe.bundle.js:292:81)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:301:21)
    at ./.storybook/preview.tsx (http://localhost:6006/main.iframe.bundle.js:529:75)

Expected Behavior:
Should work

Screenshots:

Environment (please complete the following information):

• OS: N/A
• Software: Next.js+Storybook
• Version of the Font: 1.2.0

[AugustinMauroy]

same issue @BorisZubchenko have you found any solution ?

[boar-is]

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

[AugustinMauroy]

ok thanks I'ill do that

[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;

[Francois-Esquire]

Using the localFont API didn't quite work for me, I used the preview-head.html to get this working with the same staticDirs config... don't like it, but it works.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap"
  rel="stylesheet"
/>
<style>
  @font-face {
    font-family: "Geist Sans";
    src: url("fonts/geist-sans/Geist-Variable.woff2");
  }
  @font-face {
    font-family: "Geist Mono";
    src: url("fonts/geist-mono/Geist-Variable.woff2");
  }
  .dm-serif-display-regular {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: normal;
  }
  .dm-serif-display-regular-italic {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
  }
  :root {
    --font-dm_serif_display: "DM Serif Display", serif;
    --font-geist-sans: "Geist Sans", sans-serif;
    --font-geist-mono: "Geist Mono", monospace;
  }
</style>

[JohnPhamous]

I think this has the same root cause as #59

Closing this as a duplicate of that.