From c9909817a83d0d4603b444e8539ad24d1dceebfc Mon Sep 17 00:00:00 2001 From: Jaayden Halko Date: Fri, 13 Feb 2026 00:26:47 +0700 Subject: [PATCH] chore: replace Inter with Geist variable font (#22060) --- site/.storybook/preview-head.html | 2 +- site/package.json | 2 +- site/pnpm-lock.yaml | 8 ++++---- site/src/index.css | 6 ++++++ site/src/theme/constants.ts | 2 +- site/src/theme/globalFonts.ts | 2 +- site/tailwind.config.js | 7 ++++--- 7 files changed, 18 insertions(+), 11 deletions(-) diff --git a/site/.storybook/preview-head.html b/site/.storybook/preview-head.html index 063faccb93..d92f73be81 100644 --- a/site/.storybook/preview-head.html +++ b/site/.storybook/preview-head.html @@ -1,4 +1,4 @@ - + diff --git a/site/package.json b/site/package.json index 91a87cc2b9..4bb53208a1 100644 --- a/site/package.json +++ b/site/package.json @@ -41,7 +41,7 @@ "@emotion/css": "11.13.5", "@emotion/react": "11.14.0", "@emotion/styled": "11.14.1", - "@fontsource-variable/inter": "5.2.8", + "@fontsource-variable/geist": "5.2.8", "@fontsource/fira-code": "5.2.7", "@fontsource/ibm-plex-mono": "5.2.7", "@fontsource/jetbrains-mono": "5.2.8", diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index c4d2c67a99..0a73581aa8 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -37,7 +37,7 @@ importers: '@emotion/styled': specifier: 11.14.1 version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react@19.2.2) - '@fontsource-variable/inter': + '@fontsource-variable/geist': specifier: 5.2.8 version: 5.2.8 '@fontsource/fira-code': @@ -1190,8 +1190,8 @@ packages: '@floating-ui/utils@0.2.10': resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==, tarball: https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz} - '@fontsource-variable/inter@5.2.8': - resolution: {integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==, tarball: https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz} + '@fontsource-variable/geist@5.2.8': + resolution: {integrity: sha512-cJ6m9e+8MQ5dCYJsLylfZrgBh6KkG4bOLckB35Tr9J/EqdkEM6QllH5PxqP1dhTvFup+HtMRPuz9xOjxXJggxw==, tarball: https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.2.8.tgz} '@fontsource/fira-code@5.2.7': resolution: {integrity: sha512-tnB9NNund9TwIym8/7DMJe573nlPEQb+fKUV5GL8TBYXjIhDvL0D7mgmNVNQUPhXp+R7RylQeiBdkA4EbOHPGQ==, tarball: https://registry.npmjs.org/@fontsource/fira-code/-/fira-code-5.2.7.tgz} @@ -7141,7 +7141,7 @@ snapshots: '@floating-ui/utils@0.2.10': {} - '@fontsource-variable/inter@5.2.8': {} + '@fontsource-variable/geist@5.2.8': {} '@fontsource/fira-code@5.2.7': {} diff --git a/site/src/index.css b/site/src/index.css index 82af501cbd..491ff16be9 100644 --- a/site/src/index.css +++ b/site/src/index.css @@ -131,3 +131,9 @@ padding-right: 0px; } } + +@layer utilities { + .text-xs-mono { + @apply text-xs font-mono font-medium; + } +} diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts index 28b5234d8f..4ebedf0be9 100644 --- a/site/src/theme/constants.ts +++ b/site/src/theme/constants.ts @@ -3,7 +3,7 @@ import type { TerminalFontName } from "api/typesGenerated"; export const borderRadius = 8; export const MONOSPACE_FONT_FAMILY = "'IBM Plex Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'Liberation Mono', 'Monaco', 'Courier New', Courier, monospace"; -export const BODY_FONT_FAMILY = `"Inter Variable", system-ui, sans-serif`; +export const BODY_FONT_FAMILY = `"Geist Variable", system-ui, sans-serif`; export const terminalFonts: Record = { "fira-code": MONOSPACE_FONT_FAMILY.replace("IBM Plex Mono", "Fira Code"), diff --git a/site/src/theme/globalFonts.ts b/site/src/theme/globalFonts.ts index c30bccca63..5e0d29347f 100644 --- a/site/src/theme/globalFonts.ts +++ b/site/src/theme/globalFonts.ts @@ -2,7 +2,7 @@ import "@fontsource/ibm-plex-mono/400.css"; import "@fontsource/ibm-plex-mono/600.css"; // Main body copy font -import "@fontsource-variable/inter"; +import "@fontsource-variable/geist"; // Alternative fonts for Terminal import "@fontsource/fira-code/400.css"; import "@fontsource/fira-code/600.css"; diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 47cc330f22..ab3247f3ea 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -9,7 +9,7 @@ module.exports = { theme: { extend: { fontFamily: { - sans: `"Inter Variable", system-ui, sans-serif`, + sans: `"Geist Variable", system-ui, sans-serif`, }, size: { "icon-lg": "1.5rem", @@ -18,8 +18,9 @@ module.exports = { }, fontSize: { "2xs": ["0.625rem", "0.875rem"], - xs: ["0.75rem", "1rem"], - sm: ["0.875rem", "1.5rem"], + xs: ["0.75rem", { lineHeight: "1rem", fontWeight: "500" }], + sm: ["0.875rem", { lineHeight: "1.5rem", fontWeight: "500" }], + base: ["1rem", { lineHeight: "1.5rem", fontWeight: "400" }], "3xl": ["2rem", "2.5rem"], }, borderRadius: {