diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 1af6323cc..ba44f60e7 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,7 +1,7 @@
-<meta charset="utf-8">
+<meta charset="utf-8" />
 <title>Storybook</title>
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<base target="_parent">
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<base target="_parent" />
 <style>
     html,
     body {
@@ -15,9 +15,9 @@
         box-sizing: border-box;
     }
 
-    :not(.sb-show-main)>.sb-main,
-    :not(.sb-show-nopreview)>.sb-nopreview,
-    :not(.sb-show-errordisplay)>.sb-errordisplay {
+    :not(.sb-show-main) > .sb-main,
+    :not(.sb-show-nopreview) > .sb-nopreview,
+    :not(.sb-show-errordisplay) > .sb-errordisplay {
         display: none;
     }
 
@@ -37,8 +37,7 @@
     }
 
     /* Vertical centering fix for IE11 */
-    @media screen and (-ms-high-contrast: none),
-    (-ms-high-contrast: active) {
+    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
         .sb-show-main.sb-main-centered:after {
             content: '';
             min-height: inherit;
@@ -65,7 +64,8 @@
         left: 0;
         right: 0;
         padding: 20px;
-        font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
+            BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         overflow: auto;
     }
@@ -106,7 +106,8 @@
         padding: 10px;
         background: #000;
         color: #eee;
-        font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono',
+            Consolas, 'Liberation Mono', 'Courier New', monospace;
     }
 
     .sb-errordisplay pre {
@@ -122,4 +123,4 @@
     #docs-root[hidden] {
         display: none !important;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/box/box.module.css b/src/box/box.module.css
index 4f0e258fe..971e9e161 100644
--- a/src/box/box.module.css
+++ b/src/box/box.module.css
@@ -11,7 +11,7 @@
 }
 
 pre.box {
-    font-family: monospace;
+    font-family: var(--reactist-font-family-monospace);
 }
 
 .box[hidden] {
diff --git a/src/components/keyboard-shortcut/keyboard-shortcut.less b/src/components/keyboard-shortcut/keyboard-shortcut.less
index d73985917..6a8acc330 100644
--- a/src/components/keyboard-shortcut/keyboard-shortcut.less
+++ b/src/components/keyboard-shortcut/keyboard-shortcut.less
@@ -1,7 +1,9 @@
 @import '../styles/constants.less';
 
 .reactist_keyboard_shortcut {
-    font: 11px Menlo, monospace;
+    font-family: var(--reactist-font-family-monospace);
+    font-size: 11px;
+
     > kbd > kbd {
         display: inline-block;
         padding: 3px 5px;
diff --git a/src/prose/prose.module.css b/src/prose/prose.module.css
index 668bcd6d9..d862c90e5 100644
--- a/src/prose/prose.module.css
+++ b/src/prose/prose.module.css
@@ -191,7 +191,7 @@
     background-color: var(--reactist-prose-code-fill);
     border: 1px solid var(--reactist-prose-code-border);
     border-radius: var(--reactist-border-radius-small);
-    font-family: 'Source Code Pro', Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+    font-family: var(--reactist-font-family-monospace);
     font-size: 0.875em;
     line-height: 1.6;
 }
diff --git a/src/styles/design-tokens.css b/src/styles/design-tokens.css
index 9e8cea39c..9cf126886 100644
--- a/src/styles/design-tokens.css
+++ b/src/styles/design-tokens.css
@@ -33,6 +33,8 @@
     --reactist-font-family: -apple-system, system-ui, 'Segoe UI', Roboto, Noto, Oxygen-Sans, Ubuntu,
         Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol';
+    --reactist-font-family-monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
+        'Cascadia Mono', Consolas, 'Liberation Mono', 'Courier New', monospace;
 
     /* font sizes */
     --reactist-font-size-caption: 12px;