Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

local font produces duplicate font familly #76203

Closed
cbou opened this issue Feb 19, 2025 · 0 comments
Closed

local font produces duplicate font familly #76203

cbou opened this issue Feb 19, 2025 · 0 comments
Labels
Font (next/font) Related to Next.js Font Optimization.

Comments

@cbou
Copy link

cbou commented Feb 19, 2025

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.

@github-actions github-actions bot added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Feb 19, 2025
@samcx samcx added Font (next/font) Related to Next.js Font Optimization. and removed create-next-app Related to our CLI tool for quickly starting a new Next.js application. labels Feb 19, 2025
@vercel vercel locked and limited conversation to collaborators Feb 20, 2025
@samcx samcx converted this issue into discussion #76301 Feb 20, 2025

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
Font (next/font) Related to Next.js Font Optimization.
Projects
None yet
Development

No branches or pull requests

2 participants