diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index 82755a98405d..415e3e3e919d 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 978a97977650..484776a2b086 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 67be52c126f5..140d53c4de19 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 1c6e65a8eb5b..7d036b03fbcc 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 b74a5a76fbf7..194a96e33dd4 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 14fe3153f373..94edd092e968 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 fcdd09918512..7180f8d88007 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 34d05afca98c..9996de183b1c 100644
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@@ -202,6 +202,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 826eb7689a38..f2f386d1ec78 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 a0478ac55d18..04b49e9c4efa 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 b995c6c04d43..194a423a3210 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);
+      }
     `;
   }
 }