diff --git a/app/javascript/src/styles/base/000_vars.scss b/app/javascript/src/styles/base/000_vars.scss
index a7e84a847..26b84d025 100644
--- a/app/javascript/src/styles/base/000_vars.scss
+++ b/app/javascript/src/styles/base/000_vars.scss
@@ -5,6 +5,9 @@
   --text-lg: 1.16667em;
   --text-xl: 1.5em;
   --text-xxl: 2em;
+  --header-font: Tahoma, Verdana, Helvetica, sans-serif;
+  --body-font: Verdana, Helvetica, sans-serif;
+  --monospace-font: 1.2em monospace;
 }
 
 $h1_padding: 0.8em 0 0.25em 0;
@@ -12,9 +15,6 @@ $h2_padding: 0.8em 0 0.25em 0;
 $h3_padding: 0.8em 0 0.25em 0;
 $h4_padding: 0.8em 0 0.25em 0;
 
-/* stylelint-disable-next-line value-keyword-case */
-$base_font_family: Verdana, Helvetica, sans-serif;
-
 @mixin animated-icon {
   content: "►";
   position: absolute;
diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss
index 6549f06bd..d1cf43650 100644
--- a/app/javascript/src/styles/base/020_base.scss
+++ b/app/javascript/src/styles/base/020_base.scss
@@ -1,9 +1,7 @@
-@import "../base/000_vars.scss";
-
 body {
   color: var(--text-color);
   background-color: var(--body-background-color);
-  font-family: $base_font_family;
+  font-family: var(--body-font);
   font-size: 87.5%;
   line-height: 1.25em;
 }
@@ -12,11 +10,6 @@ abbr[title=required] {
   display: none;
 }
 
-code {
-  font-family: monospace;
-  font-size: 1.2em;
-}
-
 dd {
   margin-bottom: 1em;
 }
@@ -26,7 +19,7 @@ dt {
 }
 
 h1, h2, h3, h4, h5, h6, .heading {
-  font-family: Tahoma, Verdana, Helvetica, sans-serif;
+  font-family: var(--header-font);
   font-weight: bold;
   line-height: 1.5em;
   color: var(--header-color);
diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss
index caf314053..40627770d 100644
--- a/app/javascript/src/styles/common/dtext.scss
+++ b/app/javascript/src/styles/common/dtext.scss
@@ -57,12 +57,14 @@ div.prose {
     list-style-type: disc;
   }
 
+  code, pre {
+    font: var(--monospace-font);
+    background: var(--dtext-code-background);
+  }
+
   pre {
-    font-family: monospace;
-    font-size: 1.2em;
     margin: 0.5em 0;
     padding: 0.5em 1em;
-    background: var(--dtext-code-background);
     white-space: pre-wrap;
   }
 
@@ -73,11 +75,6 @@ div.prose {
     background: var(--dtext-blockquote-background);
   }
 
-  code {
-    font-family: monospace;
-    background: var(--dtext-code-background);
-  }
-
   .tn {
     font-size: 0.8em;
     color: var(--muted-text-color);
diff --git a/app/javascript/src/styles/common/jquery_ui_custom.scss b/app/javascript/src/styles/common/jquery_ui_custom.scss
index 5d28e30b2..85137ce8c 100644
--- a/app/javascript/src/styles/common/jquery_ui_custom.scss
+++ b/app/javascript/src/styles/common/jquery_ui_custom.scss
@@ -1,10 +1,8 @@
-@import "../base/000_vars.scss";
-
 .ui-widget {
-  font-family: $base_font_family;
+  font-family: var(--body-font);
 
   input, select, textarea, button {
-    font-family: $base_font_family;
+    font-family: var(--body-font);
   }
 }
 
diff --git a/app/javascript/src/styles/specific/error.scss b/app/javascript/src/styles/specific/error.scss
index cbd2288fc..468a2c41e 100644
--- a/app/javascript/src/styles/specific/error.scss
+++ b/app/javascript/src/styles/specific/error.scss
@@ -1,6 +1,5 @@
 ul.backtrace {
-  font-family: monospace;
-  font-size: 1.2em;
+  font: var(--monospace-font);
   background: var(--dtext-code-background);
   padding: 1em;
   margin-bottom: 1em;