Thanks to visit codestin.com
Credit goes to github.com

Skip to content

'font-family' declarations are not used #75898

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.

Sign up for GitHub

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

Jump to bottom
Open
jonasvle opened this issue Feb 11, 2025 · 3 comments · May be fixed by #76274
Open

'font-family' declarations are not used #75898

jonasvle opened this issue Feb 11, 2025 · 3 comments · May be fixed by #76274
Labels
Font (next/font) Related to Next.js Font Optimization. linear: next Confirmed issue that is tracked by the Next.js team.

Comments

@jonasvle
Copy link

Link to the code that reproduces this issue

https://github.com/jonasvle/font-reproduction/blob/master/src/app/globals.css

To Reproduce

Define a localFont with custom 'font-family' via declarations.
e.g.

const block_berthold = localFont({
  src: '../app/fonts/BlockBerthold-Condensed.ttf',
  declarations: [
    {
      prop: 'font-family',
      value: 'Block Berthold',
    },
  ],
});

Current vs. Expected behavior

I expect to be able to use the font via font-family: 'Block Berthold', but I can only use it via font-family: 'block_berthold'.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32421
  Available CPU cores: 20
Binaries:
  Node: 20.14.0
  npm: 10.7.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.1.6 // Latest available version is detected (15.1.6).
  eslint-config-next: 15.1.6
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.2
Next.js Config:
  output: standalone

Which area(s) are affected? (Select all that apply)

Font (next/font)

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

No response
@github-actions github-actions bot added the Font (next/font) Related to Next.js Font Optimization. label Feb 11, 2025
@vipinsao
Copy link

I want to help in this to resolve this issue.

@imskyleen imskyleen linked a pull request Feb 20, 2025 that will close this issue
Open
@smitev
Copy link

smitev commented Feb 27, 2025

Having an option to set the font-family name when you use localFont is really needed when you don't control the css where the font-family name is already predefined.

@OleSkaar
Copy link

OleSkaar commented Apr 8, 2025

My team recently ran into this issue as well, and it's preventing us from using the Next.js font API.

In our case, we are adopting a company-wide component library, in which the font-family value is a string with spaces (i.e. font-family: Source Sans Pro). We can't makes changes to the component library, so we want the font-family values in the stylesheet output from Next.js to match the values in the component library.

Unfortunately, this isn't possible right now, as the font-family value is set to the name of the variable of the localFont function call (e.g. with the declaration const SourceSansPro = localFont({ ...options }}, the font-family in the stylesheet output by Next.js becomes SourceSansPro.

This PR would solve our issue, so we hope the Next.js team will consider including it in a release soon: #76274

@ahmedriad1 ahmedriad1 mentioned this issue Apr 24, 2025
Merged
@github-actions github-actions bot added the linear: next Confirmed issue that is tracked by the Next.js team. label Apr 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Font (next/font) Related to Next.js Font Optimization. linear: next Confirmed issue that is tracked by the Next.js team.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(next/font): allow custom font-family in declarations imskyleen/next.js
4 participants
@smitev @OleSkaar @jonasvle @vipinsao