Skip to content

fix: updated fonts on the entire site for better readability #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
vihar wants to merge 1 commit into from
Closed

fix: updated fonts on the entire site for better readability #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions docs/.vitepress/config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,38 @@ export default withMermaid(
head: [
["link", { rel: "icon", href: "/logo/favicon-32x32.png" }],

// Font preloads for critical rendering
[
"link",
{
rel: "preload",
href: "/fonts/Inter/Inter-roman.var.woff2",
as: "font",
type: "font/woff2",
crossorigin: "",
},
],
[
"link",
{
rel: "preload",
href: "/fonts/Satoshi/Satoshi-Medium.woff2",
as: "font",
type: "font/woff2",
crossorigin: "",
},
],
[
"link",
{
rel: "preload",
href: "/fonts/Satoshi/Satoshi-Bold.woff2",
as: "font",
type: "font/woff2",
crossorigin: "",
},
],

// Google Analytics with Consent Mode v2
["script", { async: "", src: "https://www.googletagmanager.com/gtag/js?id=G-JF828SKW90" }],
[
Expand Down
2 changes: 1 addition & 1 deletion docs/.vitepress/theme/components/ApiParam.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const isExpanded = ref(true);
align-items: center;
gap: 6px;
cursor: pointer;
font-family: ui-monospace, SFMono-Regular, monospace;
font-family: var(--vp-font-family-mono);
font-size: 14px;
}

Expand Down
2 changes: 1 addition & 1 deletion docs/.vitepress/theme/components/CodePanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const copyCode = async () => {
}

.panel-title {
font-size: 13px;
font-size: 14px;
font-weight: 500;
color: #374151;
}
Expand Down
4 changes: 2 additions & 2 deletions docs/.vitepress/theme/components/CookieConsent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ onMounted(() => {

.consent-text {
margin: 0;
font-size: 13px;
font-size: 14px;
line-height: 1.5;
color: var(--vp-c-text-2);
flex: 1;
Expand All @@ -117,7 +117,7 @@ onMounted(() => {
.consent-btn {
padding: 6px 16px;
border-radius: 6px;
font-size: 13px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
border: none;
Expand Down
6 changes: 3 additions & 3 deletions docs/.vitepress/theme/components/ResponsePanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const statusClass = () => {
}

.response-label {
font-size: 13px;
font-size: 14px;
font-weight: 500;
color: #374151;
}
Expand All @@ -105,8 +105,8 @@ const statusClass = () => {
}

.status-code {
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 13px;
font-family: var(--vp-font-family-mono);
font-size: 14px;
font-weight: 600;
}

Expand Down
63 changes: 47 additions & 16 deletions docs/.vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,16 +96,6 @@
SATOSHI FONT
================================================ */

@font-face {
font-family: "Satoshi";
src:
url("/fonts/Satoshi/Satoshi-Light.woff2") format("woff2"),
url("/fonts/Satoshi/Satoshi-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "Satoshi";
src:
Expand Down Expand Up @@ -136,37 +126,57 @@
font-display: swap;
}

/* ================================================
INTER VARIABLE FONT (FOR BODY TEXT)
================================================ */

@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;
}
Comment on lines +133 to +139
Copy link

@coderabbitai coderabbitai bot Mar 9, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

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.


/* ================================================
IBM PLEX MONO FONT (FOR CODE BLOCKS)
================================================ */

@font-face {
font-family: "IBM Plex Mono";
src: url("/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf") format("truetype");
src:
url("/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2") format("woff2"),
url("/fonts/IBMPlexMono/IBMPlexMono-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "IBM Plex Mono";
src: url("/fonts/IBMPlexMono/IBMPlexMono-Medium.ttf") format("truetype");
src:
url("/fonts/IBMPlexMono/IBMPlexMono-Medium.woff2") format("woff2"),
url("/fonts/IBMPlexMono/IBMPlexMono-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "IBM Plex Mono";
src: url("/fonts/IBMPlexMono/IBMPlexMono-SemiBold.ttf") format("truetype");
src:
url("/fonts/IBMPlexMono/IBMPlexMono-SemiBold.woff2") format("woff2"),
url("/fonts/IBMPlexMono/IBMPlexMono-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "IBM Plex Mono";
src: url("/fonts/IBMPlexMono/IBMPlexMono-Bold.ttf") format("truetype");
src:
url("/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2") format("woff2"),
url("/fonts/IBMPlexMono/IBMPlexMono-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
font-display: swap;
Expand All @@ -187,12 +197,33 @@

/* Fonts */
--vp-font-family-base:
"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;
--vp-font-family-mono:
"IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
monospace;
}

/* Headings use Satoshi (display/geometric sans) */
.vp-doc h1,
.vp-doc h2,
.vp-doc h3,
.vp-doc h4,
.vp-doc h5,
.vp-doc h6,
.VPNavBar .title,
.VPHero .name,
.VPHero .tagline {
font-family: var(--vp-font-family-heading);
}

/* Improved body text line-height for readability */
.vp-doc p,
.vp-doc li {
line-height: 1.75;
}

/* Dark mode */
.dark {
--vp-c-bg: #0a0a0a;
Expand Down Expand Up @@ -299,7 +330,7 @@
font-weight: 700;
padding: 5px 12px;
border-radius: 6px;
font-family: ui-monospace, SFMono-Regular, monospace;
font-family: var(--vp-font-family-mono);
text-transform: uppercase;
}

Expand Down Expand Up @@ -346,7 +377,7 @@
}

.api-endpoint-badge .path {
font-family: ui-monospace, SFMono-Regular, monospace;
font-family: var(--vp-font-family-mono);
font-size: 14px;
color: #6b7280;
}
Expand Down
Binary file added docs/public/fonts/IBMPlexMono/IBMPlexMono-Bold.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-BoldItalic.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-ExtraLight.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-ExtraLightItalic.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-Italic.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-Light.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-LightItalic.ttf
View file
Open in desktop
Binary file not shown.
Binary file added docs/public/fonts/IBMPlexMono/IBMPlexMono-Medium.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-MediumItalic.ttf
View file
Open in desktop
Binary file not shown.
Binary file added docs/public/fonts/IBMPlexMono/IBMPlexMono-Regular.woff2
View file
Open in desktop
Binary file not shown.
Binary file added docs/public/fonts/IBMPlexMono/IBMPlexMono-SemiBold.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-SemiBoldItalic.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-Thin.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/IBMPlexMono/IBMPlexMono-ThinItalic.ttf
View file
Open in desktop
Binary file not shown.
Binary file added docs/public/fonts/Inter/Inter-roman.var.woff2
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/Satoshi/Satoshi-Light.woff
View file
Open in desktop
Binary file not shown.
Binary file removed docs/public/fonts/Satoshi/Satoshi-Light.woff2
View file
Open in desktop
Binary file not shown.