Doesn't work in Storybook

[BorisZubchenko]

Font Name (Geist Sans/Geist Mono):

• [x] Geist Sans
• [x] 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:
```tsx
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 ?

[BorisZubchenko]

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}}>

  </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 https://github.com/vercel/geist-font/issues/59

Closing this as a duplicate of that.