Repository: storybook
Issue: [Bug]: next/fonts are not loaded in Storybook 8 using next/font/google or next/font/local
Labels: bug,nextjs,sev:S3

### Describe the bug

We recently migrated to Storybook 8, but our fonts (either local or the one using Google Fonts) are not working at the moment, this used to work with Storybook 7.

Here's a snippet of our main.ts:

```
import { dirname, join } from 'path';
import type { StorybookConfig } from '@storybook/nextjs';
import * as path from 'path';

function getAbsolutePath(value: string): any {
	return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
	stories: ['../**/*.stories.@(js|jsx|ts|tsx)'],
	addons: [
		getAbsolutePath('@storybook/addon-links'),
		getAbsolutePath('@storybook/addon-essentials'),
		getAbsolutePath('@storybook/addon-interactions'),
		getAbsolutePath('@storybook/manager-api'),
		getAbsolutePath('@storybook/preview-api'),
		getAbsolutePath('@chromatic-com/storybook'),
	],
	framework: {
		name: getAbsolutePath('@storybook/nextjs'),
		options: {
			nextConfigPath: path.resolve(__dirname, '../next.config.js'),
		},
	},
	docs: {
		autodocs: 'tag',
	},
	staticDirs: [
		'../public',
		{
			from: '../src/styles/fonts',
			to: '/src/styles/fonts',
		},
	],
	env: (config) => {
		const configMutation = {
			...config,
			MEDIA_FOLDER: '/storybook/',
		};
		return configMutation;
	},
	webpackFinal: async (config) => {
		if (config.resolve) {
			config.resolve.alias = {
				...config.resolve.alias,
				['@/utils/getAccessToken']: path.resolve(__dirname, '../src/utils/mocks/getAccessToken.ts'),
				['@/apis/apiFunctions/orderApi']: path.resolve(__dirname, '../src/apis/apiFunctions/mocks/orderApi.tsx'),
				['@/styles']: path.resolve(__dirname, '../src/styles'),
				['os']: path.resolve(__dirname, '../src/utils/mocks/storybook/mockOs.ts'),
				['crypto']: path.resolve(__dirname, '../src/utils/mocks/storybook/mockCrypto.ts'),
				['next/headers']: path.resolve(__dirname, '../src/utils/mocks/storybook/mockHeader.ts'),
				['@/utils/authConfig/methods']: path.resolve(
					__dirname,
					'../src/utils/mocks/storybook/mockAuthConfigMethods.ts',
				),
			};
		}

		// Modify or add SVG handling
		const svgRuleIndex = config.module.rules.findIndex((rule) => rule.test && rule.test.toString().includes('svg'));
		if (svgRuleIndex !== -1) {
			config.module.rules[svgRuleIndex] = {
				test: /\.svg$/,
				use: ['@svgr/webpack'],
				include: [
					path.resolve(__dirname, '../src/components/Icon/BadgeIcon/svgs'),
					path.resolve(__dirname, '../src/components/Icon/DietaryIcon/svgs'),
					path.resolve(__dirname, '../src/components/Icon/InterfaceIcon/svgs'),
					path.resolve(__dirname, '../src/components/Icon/SocialIcon/svgs'),
					path.resolve(__dirname, '../src/components/Icon/StickerIcon/svgs'),
				],
			};
		} else {
			config.module.rules.push({
				test: /\.svg$/,
				use: ['@svgr/webpack'],
				include: [
					path.resolve(__dirname, '../src/components/Icon/BadgeIcon/svgs'),
					path.resolve(__dirname, '../src/components/Icon/DietaryIcon/svgs'),
					path.resolve(__dirname, '../src/components/Icon/InterfaceIcon/svgs'),
					path.resolve(__dirname, '../src/components/Icon/SocialIcon/svgs'),
					path.resolve(__dirname, '../src/components/Icon/StickerIcon/svgs'),
				],
			});
		}

		// Return the altered config
		return config;
	},
};

export default config;
```

And `preview.tsx`:

```
import * as React from 'react';
import type { Preview } from '@storybook/react';
import { applesAndCarrots, montserrat } from '../src/styles/fonts';
import { clsx } from 'clsx';
import '../src/styles/global.scss';
import { customViewports } from './viewports';

const preview: Preview = {
	parameters: {
		controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } },
		viewport: {
			viewports: customViewports,
		},
		backgrounds: {
			default: 'light',
			values: [
				{ name: 'light', value: '#fff' },
				{ name: 'dark', value: '#3c3c3b' },
				{ name: 'sunshine', value: '#fdc500' },
			],
		},
	},
	decorators: [
		(Story) => (
			<div id="body-root" className={clsx(montserrat.className, montserrat.variable, applesAndCarrots.variable)}>
				<Story />
			</div>
		),
	],
};

export default preview;
```

src/styles/fonts:

```
import { Montserrat } from 'next/font/google';
import localFont from 'next/font/local';

export const montserrat = Montserrat({
	subsets: ['latin'],
	style: ['normal'],
	variable: '--font-montserrat',
	weight: ['400', '500', '600', '700'],
	display: 'swap',
});

export const applesAndCarrots = localFont({
	src: './applesAndCarrots.woff2',
	variable: '--font-apples-and-carrots',
});
```

### To Reproduce

I've tried to replicate in Stackblitz and in a new project and everything works fine. The only difference I can see it's that when I'm creating the const `montserrat` like:

```
import { Montserrat } from 'next/font/google';

export const montserrat = Montserrat({
	subsets: ['latin'],
	style: ['normal'],
	variable: '--font-montserrat',
	weight: ['400', '500', '600', '700'],
	display: 'swap',
});
```

In Stackblitz and in a new project the typeof of it it's `object` (which is the expected one) and in my project is a big `string`.

### System

```bash
Storybook Environment Info:

  System:
    OS: macOS 14.4
    CPU: (11) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/Library/Caches/fnm_multishells/10375_1712657257281/bin/node
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/10375_1712657257281/bin/npm
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm <----- active
  Browsers:
    Safari: 17.4
  npmPackages:
    @storybook/addon-essentials: ^8.0.6 => 8.0.6
    @storybook/addon-interactions: ^8.0.6 => 8.0.6
    @storybook/addon-links: ^8.0.6 => 8.0.6
    @storybook/blocks: ^8.0.6 => 8.0.6
    @storybook/nextjs: ^8.0.6 => 8.0.6
    @storybook/preview-api: ^8.0.6 => 8.0.6
    @storybook/react: ^8.0.6 => 8.0.6
    @storybook/test: ^8.0.6 => 8.0.6
    eslint-plugin-storybook: 0.8.0 => 0.8.0
    storybook: ^8.0.6 => 8.0.6
```


### Additional context

Package manager: pnpm and using monorepo.