Storybook 7.0.2, Next.js next/font and global decorators #22017

Seefer · 2023-04-10T23:23:51Z

Seefer
Apr 10, 2023

I'm having difficulty using fonts configured with next/font/google in Storybook. I'm under the impression they should work out of the box. Am I right in assuming you need to configure global decorators to pull in fonts? I've edited the Storybook preview.tsx file as shown below but the font for my single component renders with Times New Roman all the time.

Seefer · 2023-04-10T23:27:04Z

Seefer
Apr 10, 2023
Author

I initially struggled with webpack module loading errors with that code above and this was only resolved by renaming preview.ts to preview.tsx. Is this a common hiccup?

0 replies

Seefer · 2023-04-11T18:56:26Z

Seefer
Apr 11, 2023
Author

Discovered the issue was not with the decorators config in preview.tsx but with my use of the string in the className entry.

3 replies

mgray-bemyduo Aug 13, 2023

Can you please help with providing the resolution? I'm running into the same issue.

iemong Dec 28, 2023

The following code worked fine.

import type { Preview } from '@storybook/react';
import { Open_Sans } from 'next/font/google';

const OpenSansFont = Open_Sans({
    weight: '400',
    subsets: ['latin'],
    variable: '--font-OpenSans'
});

const preview: Preview = {
    decorators: [
        Story => (
            <main className={OpenSansFont.className}>
                <Story />
            </main>
        )
    ]
};

export default preview;

colmukrainec Mar 13, 2024

@iemong Hi sorry to bother you but I cannot seem to get this working no matter what thread I follow that contains a fix. My code below is my preview.tsx file and it is throwing an error. Note: I can run a local version of the web app and the font loads fine.

See my discussion post containing more details here: #26462

import type { Preview } from '@storybook/react'
import { Quando } from 'next/font/google'

export const quando = Quando({
  weight: '400',
  subsets: ['latin'],
  variable: '--font-quando',
})

const preview: Preview = {
  decorators: [
    Story => (
      <main className={quando.className}>
        <Story />
      </main>
    ),
  ],
}

export default preview

TypeError
Cannot read properties of undefined (reading 'className')
Call Stack
 preview.decorators
  main.61817949e321da2d3d1d.hot-update.js:28:214
 hookified
  runtime.js:84:10607
 undefined
  runtime.js:100:3256
 undefined
  runtime.js:100:3717
 withOutline
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-918881.iframe.bundle.js:2984:620
 hookified
  runtime.js:84:10607
 undefined
  runtime.js:100:3256
 undefined
  runtime.js:100:3717
 withMeasure
  vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-918881.iframe.bundle.js:2561:14020
 hookified
  runtime.js:84:10607

soujvnunes · 2025-01-25T15:23:00Z

soujvnunes
Jan 25, 2025

Hi, I believe that's better using a combination of preview head + google fonts mdn.

Create a file preview-head.html inside ./storybook and place the following code

<!-- preview-head.html: Overrides content of preview IFRAME HTML page's <head> tag, affecting rendered component(s) below Canvas and Docs tabs. -->
<!-- Link tag that points to Roboto font resolves to src/assets/fonts/ folder based on start command defined with '-s src/assets' parameter in package.json. -->
<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=Outfit:[email protected]&display=swap"
  rel="stylesheet" />
<style>
  body {
    font-family: 'Outfit', serif;
    font-optical-sizing: auto;
    font-style: normal;
  }
</style>

In my case, I'm using Outfit font-family.

(Just in case) If you're using Next.js + Tailwind CSS, try to put the global styles (html, body, etc) in the global CSS file.

Instead of:

    <html
      lang="en"
      className="h-full">
      <body className="h-full bg-black text-white">
        {children}
      </body>
    </html>

Move those styles to global.css:

html,
body {
  @apply h-full;
}

body {
  @apply text-white bg-black;
}

And import your global css in the preview storybook file .storybook/preview.ts

import type { Preview } from '@storybook/react'
import '../app/global.css'

const preview: Preview = {
  parameters: {},
}

export default preview

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook 7.0.2, Next.js next/font and global decorators #22017

{{title}}

Replies: 3 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Storybook 7.0.2, Next.js next/font and global decorators #22017

Seefer Apr 10, 2023

Replies: 3 comments · 3 replies

Seefer Apr 10, 2023 Author

Seefer Apr 11, 2023 Author

mgray-bemyduo Aug 13, 2023

iemong Dec 28, 2023

colmukrainec Mar 13, 2024

soujvnunes Jan 25, 2025

Seefer
Apr 10, 2023

Replies: 3 comments 3 replies

Seefer
Apr 10, 2023
Author

Seefer
Apr 11, 2023
Author

soujvnunes
Jan 25, 2025