next/font not working what so ever in project with TailwindCSS | Storybook | Page 1

What I've understood from the latest storybook 7 prelease that it should have support for next/font. I can't make it work, not sure what I'm missing here!
This is my root layout file in Next.js 13:

import '@/styles/globals.css'
import { useLocale } from 'next-intl'
import { getTranslator } from 'next-intl/server'
import { Lexend } from 'next/font/google'
import { notFound } from 'next/navigation'

const lexend = Lexend({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-lexend',
})

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="en"
      className={`${lexend.variable}`}
    >
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

My tailwind.config.js file has the following code:

fontFamily: {
        display: ['var(--font-lexend)', ...fontFamily.sans],
        body: ['var(--font-lexend)', ...fontFamily.serif],
      },
...

and my .storybook/preview.tsx file looks like this:

...
const preview: Preview = {
  parameters: {...},
  decorators: [
    (Story) => (
      <ThemeProvider attribute='class'>
        <NextIntlProvider locale='en' messages={messages}>
          <Story />
        </NextIntlProvider>
      </ThemeProvider>
    ),
  ],
}
export default preview

I thought it would help to add the className 'font-body' to a div that's wrapping <Story /> in the preview Decorator but it doesn't change.

#next/font not working what so ever in project with TailwindCSS