diff --git a/app/components/crate-header.module.css b/app/components/crate-header.module.css
index 674dd329626..b0f574fafd5 100644
--- a/app/components/crate-header.module.css
+++ b/app/components/crate-header.module.css
@@ -51,7 +51,7 @@
 
 .hash {
     margin-right: 1px;
-    font-family: monospace;
+    font-family: var(--font-monospace);
     font-size: 90%;
 }
 
diff --git a/app/components/crate-sidebar.module.css b/app/components/crate-sidebar.module.css
index 45c65099406..bcca906cb6d 100644
--- a/app/components/crate-sidebar.module.css
+++ b/app/components/crate-sidebar.module.css
@@ -66,7 +66,7 @@
     align-items: center;
     justify-content: space-between;
     padding: 7px 12px;
-    font-family: monospace;
+    font-family: var(--font-monospace);
     font-size: 14px;
     line-height: 1.5em;
     color: var(--main-color);
diff --git a/app/styles/application.module.css b/app/styles/application.module.css
index cc08d86eb93..e9d3ad96f96 100644
--- a/app/styles/application.module.css
+++ b/app/styles/application.module.css
@@ -10,7 +10,8 @@
     --header-bg-color: var(--green800);
     --footer-bg-color: var(--green800);
 
-    --font-family: "Fira Sans", sans-serif;
+    --font-sans: "Fira Sans", sans-serif;
+    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 
     --main-color: #383838;
     --main-color-light: #858585;
@@ -38,7 +39,7 @@ html, body {
 
 body {
     background-color: var(--header-bg-color);
-    font-family: var(--font-family);
+    font-family: var(--font-sans);
     font-size: 16px;
     display: flex;
     flex-direction: column;
@@ -65,8 +66,7 @@ pre {
     background: var(--main-color);
     color: white;
     padding: 20px;
-    /* Use the modern font stack inspired by Bootstrap 4 */
-    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    font-family: var(--font-monospace);
 }
 
 abbr[title] {