Font defined in @nuxt/fonts module does not load

[VladimirCores]

Environment

Nuxt project info:

---

• Operating System: Linux
• Node Version: v20.17.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-cfhpv1?file=package.json,nuxt.config.ts

Describe the bug

Font loaded dynamically and embeded from nuxt.config wont be loaded.

Additional context

No response

[screeny05]

You can add the following to .storybook/middleware.js:

const createNuxtProxy = (router, path) => {
  router.use(
    path,
    proxy.createProxyMiddleware({
      target: `http://localhost:3000/${path}`,
      changeOrigin: true,
      pathRewrite: {
        [`^${path}`]: '',
      },
    })
  );
};

module.exports = (router) => {
  createNuxtProxy(router, '/_fonts');
};

This solves the problem for running storybook locally. Unfortunately i have not yet been able to figure out how to include the fonts in a storybook-build.

[screeny05]

Actually i found a way to include the fonts in storybook-builds like chromatic as well.

To do this you have to import the _fonts-folder from the built nuxt-project itself.

In package.json:

{
  "scripts": {
    "build": "nuxt build",
    "chromatic": "pnpm build && chromatic --project-token=xxx"
  }
}

In .storybook/main.ts:

import fs from 'fs';

const config: StorybookConfig = {
  /** [...] */
  staticDirs: [
    ...(fs.existsSync(__dirname + '/../.output/public/_fonts') ? [{ from: '../.output/public/_fonts', to: '/_fonts' }] : [])
  ],
};