Skip to content

local font produces duplicate font familly #76203

@cbou

Description

@cbou

Link to the code that reproduces this issue

https://github.com/cbou/next-local-font-duplicate-family

To Reproduce

  1. Start from a empty nextjs project npx create-next-app@latest
  2. Add a local font e.g. open-sans.woff2
  3. Create two files in src/app called font.ts and font2.ts
  4. 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);
  1. 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/A

Which 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

No one assigned

    Labels

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

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions