fix(ui): render Geist consistently across Firefox and Chrome by birkskyum · Pull Request #2842 · npmx-dev/npmx.dev · GitHub

🔗 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

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

📝 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

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

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

Here’s what will happen next:

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!
In a few minutes, you’ll be able to see a preview of your changes on Vercel
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 Report

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

📢 Thoughts on this report? Let us know!

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

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

Overall, it's lgtm, but I suggest waiting for another approval (see comment above)

Interestingly, for me the current alpha deployment looks the same in Firefox (top) and Chrome (bottom):

I assume that is because I don't have the Geist font family installed locally, so it always picks url("/fonts/GeistMono-Regular.ttf") format(truetype)?

Is this just an issue with the 400 font weight? The tagline renders correctly in your screenshot, but the other text doesn't 🤔 This is also surely a bug in firefox? What version are you testing with?

Firefox version 151.0.3 (aarch64) for macOS

I couldn't find anything on this bug so this seems like the solution unfortunately

Thanks for your first contribution, @birkskyum! 💥

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.

…v#2842)

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

b0a6425

birkskyum changed the title fix(fonts): render Geist consistently across Firefox and Chrome fix(ui): render Geist consistently across Firefox and Chrome Jun 2, 2026

vercel Bot deployed to Preview – npmx.dev June 2, 2026 21:45 View deployment

serhalp requested a review from alexdln June 2, 2026 22:21

alexdln removed their request for review June 3, 2026 18:22

alexdln approved these changes Jun 3, 2026

View reviewed changes

ghostdevv requested changes Jun 5, 2026

View reviewed changes

ghostdevv approved these changes Jun 6, 2026

View reviewed changes

ghostdevv added this pull request to the merge queue Jun 6, 2026

Merged via the queue into npmx-dev:main with commit 1f1c3ba Jun 6, 2026
25 of 26 checks passed

github-actions Bot mentioned this pull request Jun 6, 2026

chore: release v0.16.0 #2856

Merged

kimkanu pushed a commit to kimkanu/npmx.dev that referenced this pull request Jun 6, 2026

fix(ui): render Geist consistently across Firefox and Chrome (npmx-de…

f1233ae

…v#2842)

kimkanu pushed a commit to kimkanu/npmx.dev that referenced this pull request Jun 6, 2026

fix(ui): render Geist consistently across Firefox and Chrome (npmx-de…

bcd7925

…v#2842)

kimkanu pushed a commit to kimkanu/npmx.dev that referenced this pull request Jun 6, 2026

fix(ui): render Geist consistently across Firefox and Chrome (npmx-de…

c3a7148

…v#2842)

ayo-run pushed a commit to ayo-run/npmx.dev that referenced this pull request Aug 5, 2026

fix(ui): render Geist consistently across Firefox and Chrome (npmx-de…

8bb06b7

…v#2842)

fix(ui): render Geist consistently across Firefox and Chrome by birkskyum · Pull Request #2842 · npmx-dev/npmx.dev · GitHub

Uh oh!

Uh oh!

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

fix(ui): render Geist consistently across Firefox and Chrome#2842ghostdevv merged 1 commit intonpmx-dev:mainnpmx-dev/npmx.dev:mainfrom birkskyum:make-sure-right-font-is-usedbirkskyum/npmx.dev:make-sure-right-font-is-usedCopy head branch name to clipboard

Conversation

birkskyum commented Jun 2, 2026

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercel Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

Pre-merge checks failed

❌ Failed checks (1 error)

Uh oh!

github-actions Bot commented Jun 2, 2026

Uh oh!

codecov Bot commented Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

serhalp commented Jun 2, 2026

Uh oh!

alexdln commented Jun 3, 2026

Uh oh!

alexdln left a comment

Choose a reason for hiding this comment

Uh oh!

trueberryless commented Jun 4, 2026

Uh oh!

ghostdevv left a comment

Choose a reason for hiding this comment

Uh oh!

birkskyum commented Jun 5, 2026

Uh oh!

ghostdevv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fix(ui): render Geist consistently across Firefox and Chrome#2842
ghostdevv merged 1 commit into
npmx-dev:mainfrom
birkskyum:make-sure-right-font-is-used

vercel Bot commented Jun 2, 2026 •
edited
Loading

coderabbitai Bot commented Jun 2, 2026 •
edited
Loading

codecov Bot commented Jun 2, 2026 •
edited
Loading