Question regarding local fonts not loading -> Next 13 + Tailwind + Storybook 7 #24055

dawid-dahl-umain · 2023-09-02T09:41:00Z

dawid-dahl-umain
Sep 2, 2023

Hello!

My setup all works as it should, but I have one problem: my custom fonts don't load in Storybook. Let me post my files.

(My main question is about the missing CSS variable, go to the bottom to see it. I'm just posting all the code for reference.)

First, here you can see part of the directory structure:

Here is where I am fixing the local font with Next, in "app/(site)/layout.tsx":

layout.tsx ->

import "../styles/globals.css"
import type { Metadata } from "next"
import localFont from "@next/font/local"
import Header from "@/app/components/Header"
import Footer from "@/app/components/Footer"
import { getCachedClient } from "@/sanity/lib/getClient"
import SiteConfigQuery from "@/sanity/queries/site-config/siteConfigQuery"
import { MobileDrawer } from "../components/MobileDrawer"

const tTFirs = localFont({
    src: [
        {
            path: "../../public/fonts/TypeType - TT Firs Regular.otf",
            weight: "300"
        },
        {
            path: "../../public/fonts/TypeType - TT Firs Medium.otf",
            weight: "400"
        },
        {
            path: "../../public/fonts/TypeType - TT Firs Medium Italic.otf",
            weight: "400",
            style: "italic"
        },
        {
            path: "../../public/fonts/TypeType - TT Firs Italic.otf",
            weight: "400",
            style: "italic"
        },
        {
            path: "../../public/fonts/TypeType - TT Firs Bold.otf",
            weight: "700"
        },
        {
            path: "../../public/fonts/TypeType - TT Firs Bold Italic.otf",
            weight: "700",
            style: "italic"
        }
    ],
    variable: "--font-tt-firs"
})

export const metadata: Metadata = {
    title: "Next sanity starter",
    description: "Generated by create next app"
}

export default async function RootLayout({ children }: { children: React.ReactNode }) {
    const config = await getCachedClient(undefined)(SiteConfigQuery.GET_BY_ID)

    return (
        <html lang="en">
            <body className={`font-sans ${tTFirs.variable}`}>
                {
                    <main className="bg-black">
                        <div className="container mx-auto">
                            <Header config={config[0]} />
                            <MobileDrawer config={config[0]} />
                            {children}
                            <Footer config={config[0]} />
                        </div>
                    </main>
                }
            </body>
        </html>
    )
}

.storybook/main.ts ->

import type { StorybookConfig } from "@storybook/nextjs"

const config: StorybookConfig = {
    stories: ["../app/**/*.mdx", "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-onboarding",
        "@storybook/addon-interactions",
        {
            name: "@storybook/addon-styling",
            options: {
                // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
                // For more details on this addon's options.
                postCss: {
                    implementation: require.resolve("postcss")
                }
            }
        }
    ],
    framework: {
        name: "@storybook/nextjs",
        options: {}
    },
    docs: {
        autodocs: "tag"
    },
    staticDirs: [
        {
            from: "../public/fonts",
            to: "public/fonts"
        },
        "../public"
    ]
}
export default config

.storybook/preview.ts ->

import type { Preview } from "@storybook/react"
import "../app/styles/globals.css"

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: "^on[A-Z].*" },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/
            }
        }
    }
}

export default preview

tailwind.config.js ->

/** @type {import('tailwindcss').Config} */
module.exports = {
    darkMode: ["class"],
    content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/**/*.{js,ts,jsx,tsx,mdx}"
    ],
    theme: {
        container: {
            center: true,
            padding: "0rem",
            screens: {
                "3xl": "2200px"
            }
        },
        extend: {
            fontFamily: {
                sans: ["var(--font-tt-firs)"]
            },
            screens: {
                xs: "460px",
                "3xl": "2200px"
            },
            ...
        }
    },
    plugins: [require("tailwindcss-animate")]
}

app/styles/globals.css ->

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url(./projectsGrid.css);
@import url(./morphingBackground.css);
@import url(./mobileDrawer.css);
@import url(./afters.css);

:root {
    --morphing-bg-height: 65.625rem;
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 3.9%;

        --card: 0 0% 100%;
        --card-foreground: 0 0% 3.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 3.9%;

        --primary: 0 0% 9%;
        --primary-foreground: 0 0% 98%;

        --secondary: 0 0% 96.1%;
        --secondary-foreground: 0 0% 9%;

        --muted: 0 0% 96.1%;
        --muted-foreground: 0 0% 45.1%;

        --accent: 0 0% 96.1%;
        --accent-foreground: 0 0% 9%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;

        --border: 0 0% 89.8%;
        --input: 0 0% 89.8%;
        --ring: 0 0% 3.9%;

        --radius: 0.5rem;

        --size-xs: 460px;
        --size-sm: 640px;
        --size-md: 768px;
        --size-lg: 1024px;
        --size-xl: 1280px;
        --size-2xl: 1536px;
        --size-3xl: 2200px;

        --nav-item-width: 7.625rem;
    }

    .dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;

        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;

        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;

        --primary: 0 0% 98%;
        --primary-foreground: 0 0% 9%;

        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;

        --muted: 0 0% 14.9%;
        --muted-foreground: 0 0% 63.9%;

        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 0 0% 98%;

        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 0% 83.1%;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }

    @layer base {
        h1 {
            @apply ls-h1;
        }

        h2 {
            @apply ls-h2;
        }

        h3 {
            @apply ls-h3;
        }

        h4 {
            @apply ls-h4;
        }
    }
}

@layer components {
    .ls-h1 {
        color: white;
        text-align: center;
        font-size: 4rem;
        font-style: normal;
        font-weight: bold;
        line-height: 105%;
        letter-spacing: -0.12rem;
    }

    .ls-h2 {
        color: white;
        font-family: helvetica;
        text-align: center;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 125%;
        letter-spacing: -0.01375rem;
    }

    .ls-h3 {
        @apply text-base;
    }

    .ls-h4 {
        @apply text-base;
    }
}

@layer utilities {
    .flex-center {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

html {
    scroll-behavior: smooth;
}

body.lock-scroll {
    overflow: hidden;
}

body.lock-scroll #home {
    pointer-events: none;
}

So, we can see in the layout.tsx file, I am doing this: <body className={`font-sans ${tTFirs.variable}`}>

This means I am attaching the variable to the body.

So then when I am inspecting the font in the dev tools, I can see the variable is not there at all. (It is there as it should in my normal dev environment, so no problems there.)

I've been wasting so many hours on this, so if anyone could help me, I would be so, so, so grateful. Thank you kindly!

By the way, I've tried a bunch of different combination with the staticDirs setting as well, as discussed here: storybook/nextjs font local link

dawid-dahl-umain · 2023-09-03T08:29:45Z

dawid-dahl-umain
Sep 3, 2023
Author

Update, 1 Day Later

So I had a bit of progress:

import * as React from "react"
import type { Preview } from "@storybook/react"
import "../app/styles/globals.css"
import { tTFirs } from "../app/lib/fonts"

const preview: Preview = {
    parameters: {
        actions: { argTypesRegex: "^on[A-Z].*" },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/
            }
        }
    },
    decorators: [
        Story => (
            <div className={`${`font-sans ${tTFirs.variable}`}`}>
                <Story />
            </div>
        )
    ]
}

export default preview

I added this decorator in preview.tsx (formerly preview.ts), and now the CSS variable is at least recognized. Also the fonts are in the stylesheet, as we can see in this picture:

But the images are still not loading. (In my normal environment, no problem. The fonts are loading from "__next/static/media). For simplicity I put all my fonts into my public folder, like this:

I an image in there as well, just to check that my staticDirs: ["../public"] was indeed working. And that image is loading up fine.

We can see here that the image is given to me by Storybook:

But no fonts, as far as I can see. The text just has the fallback font. Could anyone please help me, if they know something I don't? I would appreciate it so much.

2 replies

kasir-barati Apr 30, 2024

JFI: I've tried to load my font with decorators as it is explained here and it worked, thanks for that. But the interesting part is that now I have other components that are loading their fonts directly, something like this:

import Typography from '@mui/material/Typography';
import { Leckerli_One } from 'next/font/google';

const leckerliOne = Leckerli_One({
  style: 'normal',
  weight: '400',
  subsets: ['latin'],
});

export function SomeRandomComponent() {
  return (
    <Typography className={leckerliOne.className}>
     Some random component
    </Typography>
  );
}

I inspected the element in the browser and was surprised with the outcome:

And here is my preview.tsx:

import type { Preview } from '@storybook/react';
import { Roboto } from 'next/font/google';
import '../src/app/global.css';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
});

// ...
export default {
  // ...
  decorators: [
    (Story) => (
      <div className={roboto.className}>
        <Story />
      </div>
    ),
  ],
} satisfies Preview;

Ah, yes, it is working when I run the app. I mean this SomeRandomComponent has its own font rather than the global Roboto which I load in layout.tsx. Working on it. Will be resolved soon 🤞.

kasir-barati Apr 30, 2024

Found something though it is not a silver bullet: #23237 (comment)

dawid-dahl-umain · 2023-09-03T21:07:52Z

dawid-dahl-umain
Sep 3, 2023
Author

Problem solved! Solution is posted here on Stack Overflow, if anyone's interested:

Link

1 reply

joaopedrodcf Jan 9, 2024

This worked for me @dawid-dahl-umain https://www.npmjs.com/package/@storybook/nextjs#nextfontlocal

On main.ts

...
  "framework": {
    "name": "@storybook/nextjs",
    "options": {
        nextConfigPath: path.resolve(__dirname, '../next.config.mjs'),
    }
  },
  staticDirs: [  {
    from: '../public/fonts',
    to: 'public/fonts'
  }]
...

then on preview.tsx

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

okhaimie-dev · 2023-09-19T00:17:08Z

okhaimie-dev
Sep 19, 2023

I am just wondering if this is the best solution. Is there no way one can configure storybook to use the base font setup in tailwind config?

I am also facing the same issue with you @dawid-dahl-umain

0 replies

valentinpalkovic · 2024-01-10T18:36:49Z

valentinpalkovic
Jan 10, 2024
Maintainer

Could you try to remove the empty spaces in the path of your fonts?

0 replies

mwawrusch · 2024-02-06T17:54:26Z

mwawrusch
Feb 6, 2024

This would be so easily solvable if we could just add a class to the html element, the same way we do it everywhere else.

1 reply

mwawrusch Feb 20, 2024

For future reference, hardcoding the tailwind variable references in ./storybook/preview-body.html like so

<html class="__variable_inter-normal __variable_manrope-normal"></html>

worked for me.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Question regarding local fonts not loading -> Next 13 + Tailwind + Storybook 7 #24055

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 5 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Question regarding local fonts not loading -> Next 13 + Tailwind + Storybook 7 #24055

dawid-dahl-umain Sep 2, 2023

Replies: 5 comments · 4 replies

dawid-dahl-umain Sep 3, 2023 Author

Update, 1 Day Later

kasir-barati Apr 30, 2024

kasir-barati Apr 30, 2024

dawid-dahl-umain Sep 3, 2023 Author

joaopedrodcf Jan 9, 2024

okhaimie-dev Sep 19, 2023

valentinpalkovic Jan 10, 2024 Maintainer

mwawrusch Feb 6, 2024

mwawrusch Feb 20, 2024

dawid-dahl-umain
Sep 2, 2023

Replies: 5 comments 4 replies

dawid-dahl-umain
Sep 3, 2023
Author

dawid-dahl-umain
Sep 3, 2023
Author

okhaimie-dev
Sep 19, 2023

valentinpalkovic
Jan 10, 2024
Maintainer

mwawrusch
Feb 6, 2024