8 files changed, 21 insertions, 17 deletions
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 70c775ad..139a0034 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -37,6 +37,7 @@ export default {
     },
     {
       directives: {
+        '--font': 'generic | inherit',
         background: '--fg, -5',
         roundness: 3,
         shadow: [{
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 3bb5b16b..73eb07e9 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,10 +1,10 @@
-@import "../../variables";
-
 .RichContent {
+  font-family: var(--font);
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;
-    border-left: 0.2em solid var(--faint, $fallback--faint);
+    border-left: 0.2em solid var(--textFaint);
     padding-left: 1em;
   }
 
@@ -17,7 +17,7 @@
   kbd,
   var,
   pre {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 
   p {
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
index 7acc9d4f..c8314000 100644
--- a/src/components/rich_content/rich_content.style.js
+++ b/src/components/rich_content/rich_content.style.js
@@ -9,6 +9,8 @@ export default {
   defaultRules: [
     {
       directives: {
+        '--font': 'generic | inherit',
+        '--monoFont': 'generic | monospace',
         textNoCssColor: 'yes'
       }
     }
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 8ddb8038..053d984b 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -9,5 +9,12 @@ export default {
     'Scrollbar',
     'ScrollbarElement',
     'MobileDrawer'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        '--font': 'generic | sans-serif'
+      }
+    }
   ]
 }
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 1797afc8..30fd0bb0 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -32,12 +32,10 @@ label.Select {
     appearance: none;
     background: transparent;
     border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
+    color: var(--text);
     margin: 0;
     padding: 0 2em 0 0.2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
+    font-family: var(--font);
     font-size: 1em;
     width: 100%;
     z-index: 1;
@@ -53,7 +51,7 @@ label.Select {
     height: 100%;
     width: 0.875em;
     color: $fallback--text;
-    color: var(--inputText, $fallback--text);
+    font-family: var(--font);
     line-height: 2;
     z-index: 0;
     pointer-events: none;
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
index 923161b2..002f1bb2 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
@@ -25,12 +25,11 @@
 
 .mfa-backup-codes {
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .backup-codes {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 }
 </style>
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 930ed803..0a467b4f 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .StatusBody {
   display: flex;
   flex-direction: column;
@@ -14,7 +12,6 @@
 
   & .text,
   & .summary {
-    font-family: var(--postFont, sans-serif);
     white-space: pre-wrap;
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -41,7 +38,7 @@
     margin-bottom: 0.5em;
     border-style: solid;
     border-width: 0 0 1px;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     flex-grow: 0;
 
     &.-tall {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index a90a13ed..489407cb 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -177,7 +177,7 @@
     cursor: pointer;
     box-shadow: var(--shadow);
     font-size: 1em;
-    font-family: var(--interfaceFont, sans-serif);
+    font-family: var(--font);
     border-radius: var(--roundness);
     position: relative;
     white-space: nowrap;