Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Local font with `font-variation-settings` fails if `"` in value [2 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#85816•Fetched 2026-04-08 02:13:45
View on GitHub
Comments
2
Participants
2
Timeline
7
Reactions
0
Author
leonhandrekeleonhandreke
Participants
leomelzerleomelzerleonhandrekeleonhandreke
Timeline (top)
commented ×2labeled ×2issue_type_added ×1mentioned ×1

Code Example

import localFont from 'next/font/local';
  const monaSpace = localFont({
    src: '../public/fonts/MonaspaceNeon.var.woff2',
    display: 'swap',
    variable: '--font-monaspace',
    weight: '200 800', // Monaspace weight range
    adjustFontFallback: false,
    declarations: [
      {
        prop: 'font-variation-settings',
        value: '"wdth" 75, "slnt" 0', // Default axes
      },
    ],
  });

---

Module not found: Can't resolve '@vercel/turbopack-next/internal/font/local/cssmodule.module.css'
> 1 | import cssModule from "@vercel/turbopack-next/internal/font/local/cssmodule.module.css?{%22path%22:%22layout.tsx%22,%22import%22:%22%22,%22arguments%22:[{%22src%22:%22../public/fonts/MonaspaceNeon.var.woff2%22,%22display%22:%22swap%22,%22variable%22:%22--font-monaspace%22,%22weight%22:%22200%20800%22,%22adjustFontFallback%22:false,%22declarations%22:[{%22prop%22:%22font-variation-settings%22,%22value%22:%22\%22wdth\%22%2075,%20\%22slnt\%22%200%22}]}],%22variableName%22:%22monaSpace%22}";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | const fontData = {
  3 |     className: cssModule.className,
  4 |     style: {

expected `,` or `}` at line 1 column 249

Debug info:
- Execution of <ModuleAssetContext as AssetContext>::resolve_asset failed
- Execution of resolve failed
- Execution of <NextFontLocalResolvePlugin as BeforeResolvePlugin>::before_resolve failed
- Execution of font_options_from_query_map failed
- expected `,` or `}` at line 1 column 249
    at arguments[0].declarations[0].?
         |                                                                                                                                                                                                         v
       1 + {"path":"layout.tsx","import":"","arguments":[{"src":"../public/fonts/MonaspaceNeon.var.woff2","di...":"200 800","adjustFontFallback":false,"declarations":[{"prop":"font-variation-settings","value":""wdth" 75, "slnt" 0"}]}],"variableName":"monaSpace"}
         |                                                                                                                                                                                                         ^

---

/bin/sh: yarn: command not found
/bin/sh: pnpm: command not found

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Aug 11 21:14:08 PDT 2025; root:xnu-11417.140.69.701.11~1/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 24.10.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/condescending-wright-d9dftd?file=%2Fapp%2Flayout.tsx

To Reproduce

  1. Put in a font declaration that looks something like this:
import localFont from 'next/font/local';
const monaSpace = localFont({
  src: '../public/fonts/MonaspaceNeon.var.woff2',
  display: 'swap',
  variable: '--font-monaspace',
  weight: '200 800', // Monaspace weight range
  adjustFontFallback: false,
  declarations: [
    {
      prop: 'font-variation-settings',
      value: '"wdth" 75, "slnt" 0', // Default axes
    },
  ],
});
  1. npm run build
  2. Crash
Module not found: Can't resolve '@vercel/turbopack-next/internal/font/local/cssmodule.module.css'
> 1 | import cssModule from "@vercel/turbopack-next/internal/font/local/cssmodule.module.css?{%22path%22:%22layout.tsx%22,%22import%22:%22%22,%22arguments%22:[{%22src%22:%22../public/fonts/MonaspaceNeon.var.woff2%22,%22display%22:%22swap%22,%22variable%22:%22--font-monaspace%22,%22weight%22:%22200%20800%22,%22adjustFontFallback%22:false,%22declarations%22:[{%22prop%22:%22font-variation-settings%22,%22value%22:%22\%22wdth\%22%2075,%20\%22slnt\%22%200%22}]}],%22variableName%22:%22monaSpace%22}";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  2 | const fontData = {
  3 |     className: cssModule.className,
  4 |     style: {

expected `,` or `}` at line 1 column 249

Debug info:
- Execution of <ModuleAssetContext as AssetContext>::resolve_asset failed
- Execution of resolve failed
- Execution of <NextFontLocalResolvePlugin as BeforeResolvePlugin>::before_resolve failed
- Execution of font_options_from_query_map failed
- expected `,` or `}` at line 1 column 249
    at arguments[0].declarations[0].?
         |                                                                                                                                                                                                         v
       1 + {"path":"layout.tsx","import":"","arguments":[{"src":"../public/fonts/MonaspaceNeon.var.woff2","di...":"200 800","adjustFontFallback":false,"declarations":[{"prop":"font-variation-settings","value":""wdth" 75, "slnt" 0"}]}],"variableName":"monaSpace"}
         |                                                                                                                                                                                                         ^

Current vs. Expected behavior

I expect this to work, it worked in Next 15.5.6.

Provide environment information

/bin/sh: yarn: command not found
/bin/sh: pnpm: command not found

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Aug 11 21:14:08 PDT 2025; root:xnu-11417.140.69.701.11~1/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 24.10.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next build (local), next dev (local)

Additional context

Looks like an escaping bug? it worked in Next 15.5.6.

extent analysis

TL;DR

The issue is likely due to an escaping bug in the localFont function, which is causing a syntax error when trying to import a CSS module.

Guidance

  • The error message suggests that there is a syntax error in the import statement, specifically with the declarations object.
  • The fact that it worked in Next 15.5.6 but not in 16.0.1 suggests that there may be a regression or a change in how the localFont function handles escaping.
  • Try removing or modifying the declarations object to see if that resolves the issue.
  • Verify that the localFont function is properly escaping any special characters in the value property of the declarations object.

Example

No code example is provided as the issue is likely related to the specific implementation of the localFont function and the declarations object.

Notes

The issue may be specific to the localFont function and the way it handles escaping, and may require a fix or update to the next/font package.

Recommendation

Apply a workaround by modifying the declarations object or removing it altogether, as the issue is likely related to the escaping of special characters in the value property.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#memory optimization#batch processing#GPU compatibility#latency issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix Local font with `font-variation-settings` fails if `"` in value [2 comments, 2 participants]