diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index 82755a9840..415e3e3e91 100644
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -175,7 +175,7 @@ class HassioAddonConfig extends LitElement {
         }
         iron-autogrow-textarea {
           width: 100%;
-          font-family: monospace;
+          font-family: var(--code-font-family, monospace);
         }
         .syntaxerror {
           color: var(--error-color);
diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts
index 978a979776..484776a2b0 100644
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -72,6 +72,7 @@ class HaMarkdown extends LitElement {
         padding: 16px;
         overflow: auto;
         line-height: 1.45;
+        font-family: var(--code-font-family, monospace);
       }
       ha-markdown-element h2 {
         font-size: 1.5em;
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts
index 67be52c126..140d53c4de 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts
@@ -83,6 +83,7 @@ class MQTTDiscoveryPayload extends LitElement {
         font-size: 0.9em;
         padding-left: 4px;
         padding-right: 4px;
+        font-family: var(--code-font-family, monospace);
       }
     `;
   }
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
index 1c6e65a8eb..7d036b03fb 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
@@ -174,6 +174,7 @@ class MQTTMessages extends LitElement {
         margin: 0;
         padding-left: 4px;
         padding-right: 4px;
+        font-family: var(--code-font-family, monospace);
       }
     `;
   }
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
index b74a5a76fb..194a96e33d 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
@@ -155,6 +155,9 @@ class MqttSubscribeCard extends LitElement {
         font-size: 80%;
         color: var(--secondary-text-color);
       }
+      pre {
+        font-family: var(--code-font-family, monospace);
+      }
     `;
   }
 }
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-log-dialog.js b/src/panels/config/integrations/integration-panels/zwave/zwave-log-dialog.js
index 14fe3153f3..94edd092e9 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-log-dialog.js
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-log-dialog.js
@@ -10,6 +10,9 @@ class ZwaveLogDialog extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style include="ha-style-dialog">
+      pre {
+        font-family: var(--code-font-family, monospace);
+      }
     </style>
       <ha-paper-dialog id="pwaDialog" with-backdrop="" opened="{{_opened}}">
         <h2>OpenZwave internal logfile</h2>
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-usercodes.js b/src/panels/config/integrations/integration-panels/zwave/zwave-usercodes.js
index fcdd099185..7180f8d880 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-usercodes.js
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-usercodes.js
@@ -29,6 +29,10 @@ class ZwaveUsercodes extends PolymerElement {
           padding-right: 24px;
           padding-bottom: 24px;
         }
+
+        pre {
+          font-family: var(--code-font-family, monospace);
+        }
       </style>
       <div class="content">
         <ha-card header="Node user codes">
diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts
index 7771c5e3fb..24d73c7a94 100644
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@@ -203,6 +203,7 @@ class DialogSystemLogDetail extends LitElement {
         }
         pre {
           margin-bottom: 0;
+          font-family: var(--code-font-family, monospace);
         }
         .heading {
           display: flex;
diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts
index 826eb7689a..f2f386d1ec 100644
--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/developer-tools/event/event-subscribe-card.ts
@@ -143,6 +143,9 @@ class EventSubscribeCard extends LitElement {
       .event:last-child {
         border-bottom: 0;
       }
+      pre {
+        font-family: var(--code-font-family, monospace);
+      }
     `;
   }
 }
diff --git a/src/panels/developer-tools/service/developer-tools-service.js b/src/panels/developer-tools/service/developer-tools-service.js
index a0478ac55d..04b49e9c4e 100644
--- a/src/panels/developer-tools/service/developer-tools-service.js
+++ b/src/panels/developer-tools/service/developer-tools-service.js
@@ -75,6 +75,7 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
 
         pre {
           margin: 0;
+          font-family: var(--code-font-family, monospace);
         }
 
         h1 {
diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts
index b995c6c04d..194a423a32 100644
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@@ -50,6 +50,9 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
         user-select: text;
         cursor: default;
       }
+      pre {
+        font-family: var(--code-font-family, monospace);
+      }
     `;
   }
 }