diff --git a/package.json b/package.json
index f683d17..c950163 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,8 @@
   "dependencies": {
     "@base-ui/react": "^1.6.0",
     "@dnd-kit/react": "^0.4.0",
+    "@fontsource-variable/dm-sans": "^5.3.0",
+    "@fontsource/dm-mono": "^5.3.0",
     "@polinetwork/backend": "^1.4.0",
     "@t3-oss/env-core": "^0.13.10",
     "@tanstack/charts": "1.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1884533..a21c017 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,6 +25,12 @@ importers:
       '@dnd-kit/react':
         specifier: ^0.4.0
         version: 0.4.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@fontsource-variable/dm-sans':
+        specifier: ^5.3.0
+        version: 5.3.0
+      '@fontsource/dm-mono':
+        specifier: ^5.3.0
+        version: 5.3.0
       '@polinetwork/backend':
         specifier: ^1.4.0
         version: 1.4.0
@@ -479,6 +485,12 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@fontsource-variable/dm-sans@5.3.0':
+    resolution: {integrity: sha512-BpUG5bqePiDFMBM4ZtLSlPdAIOM990uB1dlXzIf4aw21yQR7BmykedLXXXMqGWsR18aMLOsbWccwJNh3ztTQaA==}
+
+  '@fontsource/dm-mono@5.3.0':
+    resolution: {integrity: sha512-OINjI8C1S/wpchhQxl7njZdMn4+hnDCpQ4YtvvOpKNARo+0J8O1x1IcrChxNjHOhfVv1by8C/FQoy3hXK+C1Ug==}
+
   '@github/browserslist-config@1.0.0':
     resolution: {integrity: sha512-gIhjdJp/c2beaIWWIlsXdqXVRUz3r2BxBCpfz/F3JXHvSAQ1paMYjLH+maEATtENg+k5eLV7gA+9yPp762ieuw==}
 
@@ -5524,6 +5536,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@fontsource-variable/dm-sans@5.3.0': {}
+
+  '@fontsource/dm-mono@5.3.0': {}
+
   '@github/browserslist-config@1.0.0': {}
 
   '@hono/node-server@1.19.14(hono@4.12.29)':
diff --git a/src/styles.css b/src/styles.css
index 6ca29f5..dc67ddb 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,4 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap");
+@import "@fontsource/dm-mono/400.css";
+@import "@fontsource/dm-mono/500.css";
+@import "@fontsource-variable/dm-sans/opsz.css";
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
@@ -216,10 +218,10 @@
 }
 
 @theme inline {
-  --font-sans: "DM Sans", sans-serif;
-  --font-serif: "DM Sans", sans-serif;
+  --font-sans: "DM Sans Variable", sans-serif;
+  --font-serif: "DM Sans Variable", sans-serif;
   --font-mono: "DM Mono", monospace;
-  --font-heading: "DM Sans", sans-serif;
+  --font-heading: "DM Sans Variable", sans-serif;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -450,7 +452,7 @@ tr:focus-visible {
   background: var(--pn-surface-raised);
   color: var(--pn-fg);
   box-shadow: var(--pn-shadow-float);
-  font-family: "DM Sans", sans-serif;
+  font-family: "DM Sans Variable", sans-serif;
   font-size: var(--pn-text-sm);
   line-height: var(--pn-leading-sm);
 }