diff --git a/packages/frontend/public/fonts/CommitMono-Variable.woff2 b/packages/frontend/public/fonts/CommitMono-Variable.woff2
new file mode 100644
index 0000000..f9ac1ee
Binary files /dev/null and b/packages/frontend/public/fonts/CommitMono-Variable.woff2 differ
diff --git a/packages/frontend/src/App.css b/packages/frontend/src/App.css
index 89dc3c0..8d72191 100644
--- a/packages/frontend/src/App.css
+++ b/packages/frontend/src/App.css
@@ -133,7 +133,7 @@
 }
 
 * {
-    font-family: "IBM Plex Mono", monospace;
+    font-family: "Commit Mono", monospace;
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
diff --git a/packages/frontend/src/fonts.css b/packages/frontend/src/fonts.css
index 3ea0b61..a77da0d 100644
--- a/packages/frontend/src/fonts.css
+++ b/packages/frontend/src/fonts.css
@@ -1,4 +1,18 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
+@font-face {
+    font-family: "Commit Mono";
+    src: url("/fonts/CommitMono-Variable.woff2") format("woff2");
+    font-weight: 200 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Commit Mono";
+    src: url("/fonts/CommitMono-Variable.woff2") format("woff2");
+    font-weight: 200 700;
+    font-style: italic;
+    font-display: swap;
+}
 
 @font-face {
     font-family: "Basteleur";
@@ -37,7 +51,7 @@
 }
 
 .font-mono {
-    font-family: "IBM Plex Mono", monospace;
+    font-family: "Commit Mono", monospace;
 }
 
 .font-basteleur {
diff --git a/packages/frontend/src/main.tsx b/packages/frontend/src/main.tsx
index 6b9ba0f..c895256 100644
--- a/packages/frontend/src/main.tsx
+++ b/packages/frontend/src/main.tsx
@@ -5,6 +5,7 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { RequireAuth, SessionProvider } from "@/components/session-provider";
 import { ThemeProvider } from "@/components/theme-provider";
 import App from "@/pages/App";
+import Font from "@/pages/Font";
 import Landing from "@/pages/Landing";
 import Login from "@/pages/Login";
 import NotFound from "@/pages/NotFound";
@@ -18,6 +19,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
                     <Routes>
                         {/* public routes */}
                         <Route path="/" element={<Landing />} />
+                        <Route path="/font" element={<Font />} />
                         <Route path="/login" element={<Login />} />
 
                         {/* authed routes */}
diff --git a/packages/frontend/src/pages/Font.tsx b/packages/frontend/src/pages/Font.tsx
new file mode 100644
index 0000000..8cd06e3
--- /dev/null
+++ b/packages/frontend/src/pages/Font.tsx
@@ -0,0 +1,25 @@
+const WEIGHTS = [
+    200, 225, 250, 275, 300, 325, 350, 375, 400, 425, 450, 475, 500, 525, 550, 575, 600, 625, 650, 675, 700,
+];
+
+const SAMPLE_TEXT = "The quick brown fox jumps over the lazy dog 0123456789.";
+
+export default function Font() {
+    return (
+        <main className="min-h-screen font-mono">
+            <div className="mx-auto w-fit px-8 py-10">
+                <h1 className="text-2xl font-500">Commit Mono</h1>
+                <div className="mt-6 flex flex-col divide-y divide-foreground/30">
+                    {WEIGHTS.map((weight) => (
+                        <div key={weight} className="grid grid-cols-[42px_1fr] items-center gap-3 px-3 py-3">
+                            <span className="text-sm" style={{ fontWeight: weight }}>
+                                {weight}
+                            </span>
+                            <span style={{ fontWeight: weight }}>{SAMPLE_TEXT}</span>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </main>
+    );
+}