diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 561d78640..24e5b8727 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -10,7 +10,7 @@
   --block-space-double: calc(var(--block-space) * 2);
 
   /* Text */
-  --font-sans: "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --font-sans: "Adwaita Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Fizzy", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --font-serif: ui-serif, serif;
   --font-mono: ui-monospace, monospace;
 
diff --git a/app/assets/stylesheets/font-face.css b/app/assets/stylesheets/font-face.css
new file mode 100644
index 000000000..086111ed4
--- /dev/null
+++ b/app/assets/stylesheets/font-face.css
@@ -0,0 +1,41 @@
+@layer base {
+  /*
+    Segoe UI Variable Fizzy font face configuration.
+
+    1. Segoe UI Variable (Weights 100-700):
+       Leverages variable font features to:
+       - Automatically adjust Weight (wght) dynamically within the 100-700 range.
+       - Automatically manage Optical Size (opsz) based on font-size.
+
+    2. Segoe UI Black (Weights 800-900):
+       Used as a fallback because Segoe UI Variable does not natively support 900 weight.
+       This ensures a consistent bold experience across all weights.
+  */
+  @font-face {
+    font-family: "Segoe UI Variable Fizzy";
+    src: local("Segoe UI Variable");
+    font-weight: 100 700;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Segoe UI Variable Fizzy";
+    src: local("Segoe UI Variable");
+    font-weight: 100 700;
+    font-style: italic;
+  }
+
+  @font-face {
+    font-family: "Segoe UI Variable Fizzy";
+    src: local("Segoe UI Black");
+    font-weight: 800 900;
+    font-style: normal;
+  }
+
+  @font-face {
+    font-family: "Segoe UI Variable Fizzy";
+    src: local("Segoe UI Black Italic");
+    font-weight: 800 900;
+    font-style: italic;
+  }
+}