Skip to content

Conversation

@oskari
Copy link

@oskari oskari commented Jan 22, 2026

What?

Fixes a bug in Turbopack where next/font/local with a custom font-family declaration would generate mismatched CSS:

  • @font-face correctly used the custom declaration value (e.g., "My Custom Font")
  • But .className incorrectly used the JS variable name (e.g., "myCustomFont")

This caused the font not to apply because the names didn't match.

Why?

When users specify a custom font-family in declarations:

const myCustomFont = localFont({
  src: './font.woff2',
  declarations: [{ prop: 'font-family', value: 'My Custom Font' }]
})

The generated CSS had a mismatch:

  • @font-face { font-family: 'My Custom Font'; ... }
  • .className { font-family: 'myCustomFont', ... }

Note: This bug only affects Turbopack. The Webpack implementation already handles this correctly via postcss-next-font.

How?

Updated the Turbopack implementation to check for custom font-family declarations when building:

  1. util.rs: build_font_family_string now checks declarations for a custom font-family value before falling back to the variable name
  2. font_fallback.rs: get_font_fallbacks now uses the custom font-family for fallback naming (e.g., "My Custom Font Fallback" instead of "myCustomFont Fallback")

Test Plan

  • Added test fixture with custom font-family containing a space
  • Added test verifying fontFamily matches the custom declaration
  • Webpack: ✅ Already passes (not affected)
  • Turbopack: ✅ Now passes with fix

Fixes #88894

@nextjs-bot nextjs-bot added Font (next/font) Related to Next.js Font Optimization. tests Turbopack Related to Turbopack with Next.js. labels Jan 22, 2026
@nextjs-bot
Copy link
Collaborator

Allow CI Workflow Run

  • approve CI run for commit: 8a0b7e3

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@codspeed-hq
Copy link

codspeed-hq bot commented Jan 22, 2026

Merging this PR will not alter performance

✅ 17 untouched benchmarks
⏩ 3 skipped benchmarks1


Comparing oskari:fix/local-font-custom-family-declaration (8a0b7e3) with canary (acd5d5e)

Open in CodSpeed

Footnotes

  1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Font (next/font) Related to Next.js Font Optimization. tests Turbopack Related to Turbopack with Next.js.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

next/font/local custom font-family declaration causes mismatch between @font-face and className CSS

2 participants