generate Inter font-face rules (with fallback font) and preloads (with vite-font)

[rishi-raj-jain]

• Adds vite-font and wires it into vite.config.ts, so Inter's @font-face rules, its preload link, and a metric-matched Inter Fallback family are all generated at build time from the woff2 files and consumed in __root.tsx via virtual:vite-font, replacing the hand-written copies in app.css and the hardcoded preload href.
• Removes the layout shift when Inter swaps in, since the generated fallback carries real metric overrides, and kills the three-way manual sync between the unicode-ranges, the preload tag, and the font stack that previously had to be kept in step by hand.

Disclaimer: I'm the author of vite-font package

Summary by CodeRabbit

• Performance
  • Improved font loading by preloading the primary Inter subset and loading extended characters on demand.
  • Added font fallback handling to support faster, more consistent text rendering.
  • Ensured font styles are available immediately in the initial page response.

[coderabbitai]

📝 Walkthrough

Walkthrough

Configures vite-font for Inter font subsets, updates the sans font stack, removes manual font-face declarations, and injects generated preload links and CSS into the root document head.

Changes

Inter font loading

Layer / File(s)	Summary
Configure Inter font generation package.json, vite.config.ts, src/tanstack-start.d.ts	Adds vite-font, configures Inter latin and latin-ext resources, and enables client type definitions.
Align stylesheet font contract src/styles/app.css	Adds the generated Inter Fallback family and removes the previous manual Inter @font-face blocks.
Inject generated fonts into the document head src/routes/__root.tsx	Generates preload links from fontPreloads and inlines fontCss in the initial document head.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant ViteConfig
  participant ViteFont
  participant RootRoute
  participant Browser
  ViteConfig->>ViteFont: Configure Inter font faces and subsets
  ViteFont-->>RootRoute: Provide fontPreloads and fontCss
  RootRoute->>Browser: Render preload links and inline font CSS

Loading

Suggested reviewers: tannerlinsley, LadyBluenotes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: generating Inter font-face rules and preloads via vite-font with a fallback font.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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.}

[coderabbitai]

🧹 Nitpick comments (1)

src/styles/app.css (1)

24-29: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Quote Segoe UI Symbol to resolve Stylelint value-keyword-case errors.

Stylelint flags three value-keyword-case errors on line 29: Segoe, UI, and Symbol are expected to be lowercase because the font name is unquoted. All other multi-word font names in the stack are quoted ('Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'). Quote Segoe UI Symbol for consistency and to resolve the lint errors.

♻️ Proposed fix

   --font-sans:
     'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif,
-    'Apple Color Emoji', 'Segoe UI Emoji', Segoe UI Symbol, 'Noto Color Emoji';
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/app.css` around lines 24 - 29, Quote the unquoted Segoe UI Symbol
font name in the --font-sans declaration, matching the existing quoted
multi-word font names and resolving the value-keyword-case lint errors.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/styles/app.css`:
- Around line 24-29: Quote the unquoted Segoe UI Symbol font name in the
--font-sans declaration, matching the existing quoted multi-word font names and
resolving the value-keyword-case lint errors.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 50f74e53-000a-43d9-8dba-30303e7642d9

📥 Commits

Reviewing files that changed from the base of the PR and between 4b2c635 and f2a67ee.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (5)

• package.json
• src/routes/__root.tsx
• src/styles/app.css
• src/tanstack-start.d.ts
• vite.config.ts