[Invalid] Using preview-head.html to load fonts in Storybook

[injoonH]

Describe the Issue

We are encountering a syntax error when trying to integrate next/font with Storybook alongside vanilla-extract.
As a workaround, we currently use the .storybook/preview-head.html file to load fonts.
This issue is related to a known limitation discussed in storybookjs/storybook/issues/26845.

To Reproduce

Import local fonts in the .storybook/preview.tsx file.

Screenshots

SyntaxError

(8:8) /Users/yuwol/Dev/sparcs/ara-web/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/font/local/target.css Unknown word

   6 |           src: url(./src/styles/fonts/PretendardVariable.woff2);
   7 |           
>  8 |       }`;
     |        ^
   9 |       const style = document.createElement('style');
  10 |       style.setAttribute('id', 'font-face-font-1eda20');
 @ ./node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/font/local/target.css?{"path":"src/styles/fonts/index.ts","import":"","arguments":[{"src":"./PretendardVariable.woff2","display":"swap","weight":"45 920","variable":"--font-pretendard"}],"variableName":"pretendard"} 8:6-744 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-714 77:0-714 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./src/styles/fonts/index.ts 3:0-246 4:0-22
 @ ./.storybook/preview.tsx 6:0-49 18:27-47
 @ ./storybook-config-entry.js 11:2720-2785 32:2-35:4 32:2687-35:3

Possible Solution

• Temporary Workaround: Continue using .storybook/preview-head.html for font loading until the issue is resolved.

Additional context

• 🧑‍💻 Add Storybook #17