diff --git a/package.json b/package.json
index 416ed337..741e03a2 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "vitest-dom": "^0.1.1"
   },
   "dependencies": {
+    "@fontsource-variable/recursive": "^5.2.5",
     "@mermaid-js/layout-elk": "^0.1.4",
     "@mermaid-js/mermaid-zenuml": "^0.2.0",
     "dayjs": "^1.11.7",
diff --git a/src/app.postcss b/src/app.postcss
index fe65a04f..14a20bcb 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,3 +1,4 @@
+@import '@fontsource-variable/recursive/crsv.css';
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 
 @tailwind base;
@@ -70,6 +71,10 @@
   }
 }
 
+body {
+  font-family: 'Recursive Variable', sans-serif;
+}
+
 @layer base {
   * {
     @apply border-border;
diff --git a/yarn.lock b/yarn.lock
index da092a03..e46a538b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -408,6 +408,11 @@
     "@floating-ui/utils" "^0.2.3"
     vue-demi ">=0.13.0"
 
+"@fontsource-variable/recursive@^5.2.5":
+  version "5.2.5"
+  resolved "https://registry.yarnpkg.com/@fontsource-variable/recursive/-/recursive-5.2.5.tgz#ba3f882efa9a19a9a4fc81f29cc5899470eeb074"
+  integrity sha512-tgz93CoozxkF23TeAr+ihEwwKKvZ9lFosrCjx63XPn7keeMl3nZS+iFMDsY8s1U6+jVHMHpOU8ZAOorsWNtdsA==
+
 "@fortawesome/fontawesome-free@^6.5.1":
   version "6.7.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz#8249de9b7e22fcb3ceb5e66090c30a1d5492b81a"