generate fallback font and preload automatically using vite-font

[rishi-raj-jain]

Before:

After:

Saved nearly a KB with vite-font, allows to configure fonts css via config (js), generates and emits a fallback font to be used so no layout shift happens.

Disclaimer: I'm the author of vite-font

Summary by CodeRabbit

• Performance
  • Improved font loading by adding automatic font preloads and generated font-face fallbacks to reduce layout shifts.
  • Uses swap-based rendering for smoother font transitions.
• Visual Improvements
  • Updated Lexend and Lexend Exa typography to use CSS-driven font configuration for more consistent rendering.

[coderabbitai]

Walkthrough

The website now integrates vite-font for Lexend and Lexend Exa. Vite configures generated font preloads, CSS variables, font-face rules, and metric-matched fallbacks. The document head renders the generated preload and CSS data, while root styles reference generated variables and remove local font-face declarations. Package, workspace, and TypeScript configuration were updated accordingly.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: using vite-font to generate fallback fonts and automatic preloads.

---

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]

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@website/src/components/Head.tsx`:
- Around line 84-86: Add the crossorigin value to each font preload rendered by
the fontPreloads.map block in Head, preserving the mapped value when present and
setting it to anonymous as required for these font requests.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b47c4767-614f-4648-bbd4-8ec5ad1655b8

📥 Commits

Reviewing files that changed from the base of the PR and between 32247b3 and 17e7488.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (6)

• pnpm-workspace.yaml
• website/package.json
• website/src/components/Head.tsx
• website/src/styles/root.css
• website/tsconfig.json
• website/vite.config.ts

[cubic-dev-ai]

Review completed against the latest diff

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[coderabbitai]

Actionable comments posted: 1

🤖 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.

Inline comments:
In `@website/src/components/Head.tsx`:
- Around line 84-95: Remove the outer duplicate fontPreloads.map wrapper in the
Head component, leaving a single map that renders each preload link once and
preserves the existing link properties.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ac2de9b8-7f80-4029-bf91-e3c0147835f1

📥 Commits

Reviewing files that changed from the base of the PR and between 17e7488 and 5f5572a.

📒 Files selected for processing (1)

• website/src/components/Head.tsx

[cubic-dev-ai]

1 issue found and verified against the latest diff

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="website/src/components/Head.tsx">

<violation number="1" location="website/src/components/Head.tsx:84">
P0: No `<link>` preload elements are rendered because the outer fontPreloads.map wraps the inner one in a JSX expression that produces objects instead of link elements. Remove the outer map wrapper entirely — it's a duplicate nesting that breaks the preload rendering.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[yslpn]

Hi. Thanks for bringing this to my attention.

Are there any other ways to fix this? Is it possible to find some system fonts and set them as fallbacks via font-display?

I can't accept the current solution because this library was released a week ago and has 60 installations per week. This could be dangerous.