coder · mtojek · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/coderd/apidoc/docs.go b/coderd/apidoc/docs.go
diff --git a/coderd/apidoc/swagger.json b/coderd/apidoc/swagger.json
diff --git a/codersdk/users.go b/codersdk/users.go
@@ -192,12 +192,17 @@ type ValidateUserPasswordResponse struct {
 // TerminalFontName is the name of supported terminal font
 type TerminalFontName string
 
-var TerminalFontNames = []TerminalFontName{TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode}
+var TerminalFontNames = []TerminalFontName{
+	TerminalFontUnknown, TerminalFontIBMPlexMono, TerminalFontFiraCode,
+	TerminalFontSourceCodePro, TerminalFontJetBrainsMono,
+}
 
 const (
-	TerminalFontUnknown     TerminalFontName = ""
-	TerminalFontIBMPlexMono TerminalFontName = "ibm-plex-mono"
-	TerminalFontFiraCode    TerminalFontName = "fira-code"
+	TerminalFontUnknown       TerminalFontName = ""
+	TerminalFontIBMPlexMono   TerminalFontName = "ibm-plex-mono"
+	TerminalFontFiraCode      TerminalFontName = "fira-code"
+	TerminalFontSourceCodePro TerminalFontName = "source-code-pro"
+	TerminalFontJetBrainsMono TerminalFontName = "jetbrains-mono"
 )
 
 type UserAppearanceSettings struct {

diff --git a/docs/reference/api/schemas.md b/docs/reference/api/schemas.md
diff --git a/site/package.json b/site/package.json
@@ -44,6 +44,8 @@
 		"@fontsource-variable/inter": "5.1.1",
 		"@fontsource/fira-code": "5.2.5",
 		"@fontsource/ibm-plex-mono": "5.1.1",
+		"@fontsource/jetbrains-mono": "5.2.5",
+		"@fontsource/source-code-pro": "5.2.5",
 		"@monaco-editor/react": "4.6.0",
 		"@mui/icons-material": "5.16.14",
 		"@mui/lab": "5.0.0-alpha.175",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/api/typesGenerated.ts b/site/src/api/typesGenerated.ts
diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearanceForm.tsx
@@ -16,7 +16,11 @@ import { Stack } from "components/Stack/Stack";
 import { ThemeOverride } from "contexts/ThemeProvider";
 import type { FC } from "react";
 import themes, { DEFAULT_THEME, type Theme } from "theme";
-import { DEFAULT_TERMINAL_FONT, terminalFontLabels } from "theme/constants";
+import {
+	DEFAULT_TERMINAL_FONT,
+	terminalFontLabels,
+	terminalFonts,
+} from "theme/constants";
 import { Section } from "../Section";
 
 export interface AppearanceFormProps {
@@ -115,7 +119,7 @@ export const AppearanceForm: FC<AppearanceFormProps> = ({
 								value={name}
 								control={<Radio />}
 								label={
-									<div css={{ fontFamily: terminalFontLabels[name] }}>
+									<div css={{ fontFamily: terminalFonts[name] }}>
 										{terminalFontLabels[name]}
 									</div>
 								}

diff --git a/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx b/site/src/pages/UserSettingsPage/AppearancePage/AppearancePage.test.tsx
@@ -51,8 +51,8 @@ describe("appearance page", () => {
 			theme_preference: "dark",
 		});
 
-		const ibmPlex = await screen.findByText("Fira Code");
-		await userEvent.click(ibmPlex);
+		const firaCode = await screen.findByText("Fira Code");
+		await userEvent.click(firaCode);
 
 		// Check if the API was called correctly
 		expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1);
@@ -61,4 +61,44 @@ describe("appearance page", () => {
 			theme_preference: "dark",
 		});
 	});
+
+	it("changes font to fira code, then back to web terminal font", async () => {
+		renderWithAuth(<AppearancePage />);
+
+		// given
+		jest
+			.spyOn(API, "updateAppearanceSettings")
+			.mockResolvedValueOnce({
+				...MockUser,
+				terminal_font: "fira-code",
+				theme_preference: "dark",
+			})
+			.mockResolvedValueOnce({
+				...MockUser,
+				terminal_font: "ibm-plex-mono",
+				theme_preference: "dark",
+			});
+
+		// when
+		const firaCode = await screen.findByText("Fira Code");
+		await userEvent.click(firaCode);
+
+		// then
+		expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(1);
+		expect(API.updateAppearanceSettings).toHaveBeenCalledWith({
+			terminal_font: "fira-code",
+			theme_preference: "dark",
+		});
+
+		// when
+		const ibmPlex = await screen.findByText("Web Terminal Font");
+		await userEvent.click(ibmPlex);
+
+		// then
+		expect(API.updateAppearanceSettings).toHaveBeenCalledTimes(2);
+		expect(API.updateAppearanceSettings).toHaveBeenNthCalledWith(2, {
+			terminal_font: "ibm-plex-mono",
+			theme_preference: "dark",
+		});
+	});
 });
diff --git a/site/src/theme/constants.ts b/site/src/theme/constants.ts
@@ -7,13 +7,23 @@ export const BODY_FONT_FAMILY = `"Inter Variable", system-ui, sans-serif`;
 
 export const terminalFonts: Record<TerminalFontName, string> = {
 	"fira-code": MONOSPACE_FONT_FAMILY.replace("IBM Plex Mono", "Fira Code"),
+	"jetbrains-mono": MONOSPACE_FONT_FAMILY.replace(
+		"IBM Plex Mono",
+		"JetBrains Mono",
+	),
+	"source-code-pro": MONOSPACE_FONT_FAMILY.replace(
+		"IBM Plex Mono",
+		"Source Code Pro",
+	),
 	"ibm-plex-mono": MONOSPACE_FONT_FAMILY,
 
 	"": MONOSPACE_FONT_FAMILY,
 };
 export const terminalFontLabels: Record<TerminalFontName, string> = {
 	"fira-code": "Fira Code",
-	"ibm-plex-mono": "IBM Plex Mono",
+	"jetbrains-mono": "JetBrains Mono",
+	"source-code-pro": "Source Code Pro",
+	"ibm-plex-mono": "Web Terminal Font",
 	"": "", // needed for enum completeness, otherwise fails the build
 };
 export const DEFAULT_TERMINAL_FONT = "ibm-plex-mono";

diff --git a/site/src/theme/globalFonts.ts b/site/src/theme/globalFonts.ts
@@ -3,6 +3,10 @@ import "@fontsource/ibm-plex-mono/400.css";
 import "@fontsource/ibm-plex-mono/600.css";
 // Main body copy font
 import "@fontsource-variable/inter";
-// Alternative font for Terminal
+// Alternative fonts for Terminal
 import "@fontsource/fira-code/400.css";
 import "@fontsource/fira-code/600.css";
+import "@fontsource/source-code-pro/400.css";
+import "@fontsource/source-code-pro/600.css";
+import "@fontsource/jetbrains-mono/400.css";
+import "@fontsource/jetbrains-mono/600.css";