diff --git a/app/assets/stylesheets/font-face.css b/app/assets/stylesheets/font-face.css
index 4563c0b52..086111ed4 100644
--- a/app/assets/stylesheets/font-face.css
+++ b/app/assets/stylesheets/font-face.css
@@ -1,4 +1,16 @@
 @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");