Skip to content

Local font with font-variation-settings fails if " in value #85816

@leonhandreke

Description

@leonhandreke

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    TurbopackRelated to Turbopack with Next.js.linear: turbopackConfirmed issue that is tracked by the Turbopack team.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions