-
Notifications
You must be signed in to change notification settings - Fork 30.2k
Closed
Labels
Font (next/font)Related to Next.js Font Optimization.Related to Next.js Font Optimization.
Description
Link to the code that reproduces this issue
https://github.com/cbou/next-local-font-duplicate-family
To Reproduce
- Start from a empty nextjs project
npx create-next-app@latest - Add a local font e.g. open-sans.woff2
- Create two files in
src/appcalled font.ts and font2.ts - Update both files with this content:
import localFont from 'next/font/local';
export const fonts = localFont({
src: [
{
path: './fonts/open-sans.woff2',
weight: '200',
style: 'normal',
},
],
variable: '--copy-font',
});
console.log(fonts);
- Run
npm run dev
Current vs. Expected behavior
You will see two output in the console. Both with the same fontFamily.
{
className: 'fonts_aefa998b-module__Bws0DG__className',
style: { fontFamily: "'fonts', 'fonts Fallback'" },
variable: 'fonts_aefa998b-module__Bws0DG__variable'
}
Expected:
The font family IDs should be for each call of localFont different or at least configureable.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.3.0: Thu Jan 2 20:24:16 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6000
Available memory (MB): 16384
Available CPU cores: 10
Binaries:
Node: 22.11.0
npm: 10.9.0
Yarn: N/A
pnpm: 8.14.1
Relevant Packages:
next: 15.1.7 // Latest available version is detected (15.1.7).
eslint-config-next: 15.1.7
react: 19.0.0
react-dom: 19.0.0
typescript: 5.7.3
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
create-next-app
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
This issue can be mitigated by using different variable name. e.g. const font = ... and const font2 = .... Still this is not intuitive.
Metadata
Metadata
Assignees
Labels
Font (next/font)Related to Next.js Font Optimization.Related to Next.js Font Optimization.