From 8aebd734666141aa30d7a7607be6ab42cc7fd459 Mon Sep 17 00:00:00 2001 From: Jake Howell Date: Tue, 3 Mar 2026 23:00:50 +1100 Subject: [PATCH] feat: implement new default monospace font `Geist Mono` (#22081) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This pull-request follows up #22060 Felt wrong to only make use of Geist when there is a Monospace variant here too. Felt best we default to this as the default font as its inline with the rest of the application. This also updates the lower line for Workspace Statistics 🙂 --- coderd/apidoc/docs.go | 2 ++ coderd/apidoc/swagger.json | 2 ++ codersdk/users.go | 5 ++-- docs/reference/api/schemas.md | 6 ++--- .../workspace-access/web-terminal.md | 3 ++- site/.storybook/preview-head.html | 3 +-- site/package.json | 1 + site/pnpm-lock.yaml | 8 +++++++ site/src/api/typesGenerated.ts | 2 ++ .../AppearancePage/AppearanceForm.tsx | 10 +++++++- .../AppearancePage/AppearancePage.test.tsx | 14 +++++------ site/src/theme/constants.ts | 24 +++++++++++++------ site/src/theme/globalFonts.ts | 1 + site/tailwind.config.js | 2 ++ 14 files changed, 60 insertions(+), 23 deletions(-) diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go index 9d866e7932..81af4967e5 100644 --- a/coderd/apidoc/docs.go +++ b/coderd/apidoc/docs.go @@ -19861,6 +19861,7 @@ const docTemplate = `{ "type": "string", "enum": [ "", + "geist-mono", "ibm-plex-mono", "fira-code", "source-code-pro", @@ -19868,6 +19869,7 @@ const docTemplate = `{ ], "x-enum-varnames": [ "TerminalFontUnknown", + "TerminalFontGeistMono", "TerminalFontIBMPlexMono", "TerminalFontFiraCode", "TerminalFontSourceCodePro", diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json index a3cc695b3e..04e2369ff4 100644 --- a/coderd/apidoc/swagger.json +++ b/coderd/apidoc/swagger.json @@ -18190,6 +18190,7 @@ "type": "string", "enum": [ "", + "geist-mono", "ibm-plex-mono", "fira-code", "source-code-pro", @@ -18197,6 +18198,7 @@ ], "x-enum-varnames": [ "TerminalFontUnknown", + "TerminalFontGeistMono", "TerminalFontIBMPlexMono", "TerminalFontFiraCode", "TerminalFontSourceCodePro", diff --git a/codersdk/users.go b/codersdk/users.go index eccee428de..4ecabc82af 100644 --- a/codersdk/users.go +++ b/codersdk/users.go @@ -196,12 +196,13 @@ type ValidateUserPasswordResponse struct { type TerminalFontName string var TerminalFontNames = []TerminalFontName{ - TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode, - TerminalFontSourceCodePro, TerminalFontJetBrainsMono, + TerminalFontUnknown, TerminalFontGeistMono, TerminalFontIBMPlexMono, + TerminalFontFiraCode, TerminalFontSourceCodePro, TerminalFontJetBrainsMono, } const ( TerminalFontUnknown TerminalFontName = "" + TerminalFontGeistMono TerminalFontName = "geist-mono" TerminalFontIBMPlexMono TerminalFontName = "ibm-plex-mono" TerminalFontFiraCode TerminalFontName = "fira-code" TerminalFontSourceCodePro TerminalFontName = "source-code-pro" diff --git a/docs/reference/api/schemas.md b/docs/reference/api/schemas.md index ab53b42ef6..cfa29730c2 100644 --- a/docs/reference/api/schemas.md +++ b/docs/reference/api/schemas.md @@ -9346,9 +9346,9 @@ Restarts will only happen on weekdays in this list on weeks which line up with W #### Enumerated Values -| Value(s) | -|-----------------------------------------------------------------------| -| ``, `fira-code`, `ibm-plex-mono`, `jetbrains-mono`, `source-code-pro` | +| Value(s) | +|-------------------------------------------------------------------------------------| +| ``, `fira-code`, `geist-mono`, `ibm-plex-mono`, `jetbrains-mono`, `source-code-pro` | ## codersdk.TimingStage diff --git a/docs/user-guides/workspace-access/web-terminal.md b/docs/user-guides/workspace-access/web-terminal.md index 93c364c289..46c04134df 100644 --- a/docs/user-guides/workspace-access/web-terminal.md +++ b/docs/user-guides/workspace-access/web-terminal.md @@ -85,7 +85,8 @@ You can customize the terminal font through your user settings: 1. Click your avatar in the top-right corner 2. Select **Settings** → **Appearance** 3. Choose from available fonts: - - **IBM Plex Mono** (default) + - **Geist Mono** (default) + - **IBM Plex Mono** - **Fira Code** (with ligatures) - **JetBrains Mono** - **Source Code Pro** diff --git a/site/.storybook/preview-head.html b/site/.storybook/preview-head.html index d92f73be81..821d23da69 100644 --- a/site/.storybook/preview-head.html +++ b/site/.storybook/preview-head.html @@ -1,5 +1,4 @@ - - + diff --git a/site/package.json b/site/package.json index cea9343741..191d9678fe 100644 --- a/site/package.json +++ b/site/package.json @@ -42,6 +42,7 @@ "@emotion/react": "11.14.0", "@emotion/styled": "11.14.1", "@fontsource-variable/geist": "5.2.8", + "@fontsource-variable/geist-mono": "5.2.7", "@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 1757d1ba07..f2343291ac 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -40,6 +40,9 @@ importers: '@fontsource-variable/geist': specifier: 5.2.8 version: 5.2.8 + '@fontsource-variable/geist-mono': + specifier: 5.2.7 + version: 5.2.7 '@fontsource/fira-code': specifier: 5.2.7 version: 5.2.7 @@ -1076,6 +1079,9 @@ 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/geist-mono@5.2.7': + resolution: {integrity: sha512-ZKlZ5sjtalb2TwXKs400mAGDlt/+2ENLNySPx0wTz3bP3mWARCsUW+rpxzZc7e05d2qGch70pItt3K4qttbIYA==, tarball: https://registry.npmjs.org/@fontsource-variable/geist-mono/-/geist-mono-5.2.7.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} @@ -7229,6 +7235,8 @@ snapshots: '@floating-ui/utils@0.2.10': {} + '@fontsource-variable/geist-mono@5.2.7': {} + '@fontsource-variable/geist@5.2.8': {} '@fontsource/fira-code@5.2.7': {} diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts index 894bacf359..2a4639c792 100644 --- a/site/src/api/typesGenerated.ts +++ b/site/src/api/typesGenerated.ts @@ -6137,6 +6137,7 @@ export interface TemplateVersionsByTemplateRequest extends Pagination { // From codersdk/users.go export type TerminalFontName = | "fira-code" + | "geist-mono" | "ibm-plex-mono" | "jetbrains-mono" | "source-code-pro" @@ -6144,6 +6145,7 @@ export type TerminalFontName = export const TerminalFontNames: TerminalFontName[] = [ "fira-code", + "geist-mono", "ibm-plex-mono", "jetbrains-mono", "source-code-pro", diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx index d072c129e2..bad1212c95 100644 --- a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx +++ b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx @@ -18,6 +18,14 @@ import { import { cn } from "utils/cn"; import { Section } from "../Section"; +// Display Geist Mono (the default monospace font) first, then the rest +// alphabetically. TerminalFontNames is auto-generated in alphabetical +// order, so we reorder here for a better UX. +const sortedTerminalFontNames = [ + "geist-mono" as TerminalFontName, + ...TerminalFontNames.filter((name) => name !== "" && name !== "geist-mono"), +]; + interface AppearanceFormProps { isUpdating?: boolean; error?: unknown; @@ -107,7 +115,7 @@ export const AppearanceForm: FC = ({ onChangeTerminalFont(toTerminalFontName(value)) } > - {TerminalFontNames.filter((name) => name !== "").map((name) => ( + {sortedTerminalFontNames.map((name) => (