FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

generate Inter font-face rules (with fallback font) and preloads (with vite-font) by rishi-raj-jain · Pull Request #1041 · TanStack/tanstack.com · GitHub

/ tanstack.com Public

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

Open
rishi-raj-jain wants to merge 6 commits into
TanStack:mainfrom
rishi-raj-jain:main
ConversationCommits (6)ChecksFiles changed
Open

generate Inter font-face rules (with fallback font) and preloads (with vite-font)#1041
rishi-raj-jain wants to merge 6 commits into
TanStack:mainfrom
rishi-raj-jain:main

Conversation

rishi-raj-jain commented Jul 12, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
  • 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 Bot commented Jul 12, 2026 •
edited
Loading

Copy link
Copy Markdown

📝 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

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

coderabbitai Bot reviewed Jul 12, 2026
View reviewed changes

coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Choose a reason Spam Abuse Off Topic Outdated Duplicate Resolved Low Quality
🧹 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

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Show hidden characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

coderabbitai[bot] coderabbitai[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

Back | FazBrowse Home | New Git URL