fix: updated fonts on the entire site for better readability#237
Closed
fix: updated fonts on the entire site for better readability#237
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThis PR updates the documentation's typography system by introducing font preloading in the build configuration, replacing hardcoded font stacks with CSS variables across components, and refactoring the core stylesheet to implement Inter for body text, Satoshi for headings, and increased font sizes for improved readability. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/.vitepress/theme/style.css`:
- Around line 133-139: The `@font-face` block for font-family "Inter" uses a
variable-font declaration (src format "woff2-variations" and a font-weight
range) that is failing the CSS linter; replace the variable-font rule with
linter-friendly declarations by either (A) providing a fallback woff2
(non-variations) src or (B) emitting separate `@font-face` blocks per weight
(e.g., distinct `@font-face` rules for 100, 200, … 900) and remove the
space-separated range notation so the linter accepts the rules; update the
`@font-face`(s) that reference "Inter" (the block with src:
url("/fonts/Inter/Inter-roman.var.woff2") format("woff2-variations") and the
similar block at lines ~198-205) accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 01cfe6d0-dd3d-4f27-a279-4bc1a7f5224d
⛔ Files ignored due to path filters (17)
docs/public/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2is excluded by!**/*.woff2docs/public/fonts/IBMPlexMono/IBMPlexMono-BoldItalic.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-ExtraLight.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-ExtraLightItalic.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-Italic.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-Light.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-LightItalic.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-Medium.woff2is excluded by!**/*.woff2docs/public/fonts/IBMPlexMono/IBMPlexMono-MediumItalic.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2is excluded by!**/*.woff2docs/public/fonts/IBMPlexMono/IBMPlexMono-SemiBold.woff2is excluded by!**/*.woff2docs/public/fonts/IBMPlexMono/IBMPlexMono-SemiBoldItalic.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-Thin.ttfis excluded by!**/*.ttfdocs/public/fonts/IBMPlexMono/IBMPlexMono-ThinItalic.ttfis excluded by!**/*.ttfdocs/public/fonts/Inter/Inter-roman.var.woff2is excluded by!**/*.woff2docs/public/fonts/Satoshi/Satoshi-Light.woffis excluded by!**/*.woffdocs/public/fonts/Satoshi/Satoshi-Light.woff2is excluded by!**/*.woff2
📒 Files selected for processing (6)
docs/.vitepress/config.mtsdocs/.vitepress/theme/components/ApiParam.vuedocs/.vitepress/theme/components/CodePanel.vuedocs/.vitepress/theme/components/CookieConsent.vuedocs/.vitepress/theme/components/ResponsePanel.vuedocs/.vitepress/theme/style.css
Comment on lines
+133
to
+139
| @font-face { | ||
| font-family: "Inter"; | ||
| src: url("/fonts/Inter/Inter-roman.var.woff2") format("woff2-variations"); | ||
| font-weight: 100 900; | ||
| font-style: normal; | ||
| font-display: swap; | ||
| } |
There was a problem hiding this comment.
Unblock the CSS lint check for the new font declarations.
Line 134 and Lines 200-204 currently fail the repo’s CSS lint rules, so this stylesheet will not pass as written.
Suggested fix
`@font-face` {
- font-family: "Inter";
+ font-family: Inter;
src: url("/fonts/Inter/Inter-roman.var.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@@
--vp-font-family-base:
- "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ "Inter", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
--vp-font-family-heading:
- "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+ "Satoshi", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;
--vp-font-family-mono:
- "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+ "IBM Plex Mono", ui-monospace, "SFMono-Regular", "SF Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono",
+ "Courier New",
monospace;Also applies to: 198-205
🧰 Tools
🪛 Stylelint (17.4.0)
[error] 134-134: Unexpected quotes around "Inter" (font-family-name-quotes)
(font-family-name-quotes)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/.vitepress/theme/style.css` around lines 133 - 139, The `@font-face` block
for font-family "Inter" uses a variable-font declaration (src format
"woff2-variations" and a font-weight range) that is failing the CSS linter;
replace the variable-font rule with linter-friendly declarations by either (A)
providing a fallback woff2 (non-variations) src or (B) emitting separate
`@font-face` blocks per weight (e.g., distinct `@font-face` rules for 100, 200, …
900) and remove the space-separated range notation so the linter accepts the
rules; update the `@font-face`(s) that reference "Inter" (the block with src:
url("/fonts/Inter/Inter-roman.var.woff2") format("woff2-variations") and the
similar block at lines ~198-205) accordingly.
sriramveeraghanta
approved these changes
Mar 9, 2026
Member
|
Looks good to me |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Font changes:
Readability fixes:
Performance:
Type of Change
Summary by CodeRabbit
Style
Performance