fix(ui): render Geist consistently across Firefox and Chrome

[birkskyum]

🔗 Linked issue

resolves #2841

🧭 Context

Firefox on macOS renders the site's header text (logo, nav, "jump to..." button) noticeably thinner than Chrome. Reproducible on any machine with Geist or Geist Mono installed in ~/Library/Fonts/, which is pretty common since Vercel ships them with their dev tools.

The cause is the local() fallbacks in the auto-generated @font-face rules:

src: local("Geist Mono Regular"), local("Geist Mono"), url("/fonts/GeistMono-Regular.ttf") format(truetype);

Chrome 86+ ignores local() for user-installed fonts as an anti-fingerprinting measure, so it falls through to the bundled TTF. Firefox honours it and picks up the local OTF. Same Geist family, but the OTF (CFF outlines) and TTF (TrueType outlines) rasterize differently in Firefox on macOS, and the OTF ends up lighter. Identical CSS, two different fonts actually rendered.

📚 Description

Sets fonts.experimental.disableLocalFallbacks: true in nuxt.config.ts. With it on, @nuxt/fonts stops emitting local(...) in the generated nuxt-fonts-global.css, so both browsers always load the bundled TTFs from public/fonts/.

Verified by checking the generated CSS no longer contains local(...) entries and that Firefox now matches Chrome after a hard reload.

Before ( macos w/ firefox ) - npmx.dev

After ( macos w/ firefox ) - localhost

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jun 2, 2026 9:45pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jun 2, 2026 9:45pm
npmx-lunaria	Ignored		Jun 2, 2026 9:45pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request adds an experimental configuration flag to the Nuxt config file to disable local font fallbacks. The flag is inserted within the font configuration section and targets Firefox font rendering compatibility.

Changes

Font configuration experimental flag

Layer / File(s)	Summary
Disable local font fallbacks configuration nuxt.config.ts	An experimental configuration block with disableLocalFallbacks: true is added to the Nuxt configuration, positioned between fonts.providers and fonts.families.

Possibly related PRs

• npmx-dev/npmx.dev#2803: Both PRs touch nuxt.config.ts font handling; the retrieved PR switches fonts.families to the local provider, while this PR adds experimental.disableLocalFallbacks: true to govern local-fallback behaviour for that same font setup.

Suggested reviewers

• danielroe

---

Important

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error)

Check name	Status	Explanation	Resolution
Title check	❌ Error	The PR title mentions 'fix(ui): render Geist consistently across Firefox and Chrome', but the actual change is in the fonts configuration (nuxt.config.ts with experimental.disableLocalFallbacks) and the issue is specifically about font rendering, not general UI fixes.	Update the title to reflect the actual change scope: 'fix(fonts): disable local font fallbacks to ensure Geist renders consistently across browsers' or similar, to accurately represent the fonts configuration change.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is directly related to the changeset, explaining the root cause (local() fallbacks causing different font rendering), the fix applied, and verification steps performed.
Linked Issues check	✅ Passed	The PR directly addresses issue #2841 by implementing the exact solution needed: disabling local font fallbacks in nuxt.config.ts to force both browsers to use bundled TTFs, ensuring consistent rendering.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to the stated objective; only one configuration option was added to resolve the font rendering issue without introducing unrelated modifications.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Hello! Thank you for opening your first PR to npmx, @birkskyum! 🚀

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Vercel

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[serhalp]

🤔 @alexdln can you take a look at this one? I thought we fixed this with #2803?

[alexdln]

Previously, nuxt loaded fonts from the internet during build time, and in my PR, we changed it to use fonts stored in our repository.

This PR changes what nuxt-fonts generates - it no longer uses fonts already installed on the user's system, but always loads them from our assets.

On the one hand, we guarantee that the font will be exactly what we want, but on the other, it will depend only on our assets.

Perhaps there's something else going on.

In general, I think fontFallback is about a fallback font (like in nuxt/fontaine), not a priority font (as it is in nuxt/fonts). It seems like there might be an issue in the module itself. @danielroe wdyt?

On Windows everything seems to work without problems

Otherwise lgtm