diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts
index d26b78f19e..6bb32e58b2 100644
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@@ -1,4 +1,8 @@
-import { haFontFamilyBody } from "../../src/resources/theme/typography.globals";
+import {
+  haFontFamilyBody,
+  haFontSmoothing,
+  haMozOsxFontSmoothing,
+} from "../../src/resources/theme/typography.globals";
 import "./hassio-main";
 
 import("../../src/resources/append-ha-style");
@@ -7,8 +11,8 @@ const styleEl = document.createElement("style");
 styleEl.textContent = `
 body {
   font-family: ${haFontFamilyBody};
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
+  -webkit-font-smoothing: ${haFontSmoothing};
   font-weight: 400;
   margin: 0;
   padding: 0;
diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts
index 1337e51d48..2979349546 100644
--- a/hassio/src/resources/hassio-style.ts
+++ b/hassio/src/resources/hassio-style.ts
@@ -14,6 +14,7 @@ export const hassioStyle = css`
     margin-bottom: 8px;
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-2xl);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-condensed);
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 100496a858..8e6df0246c 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -929,8 +929,8 @@ export class HaDataTable extends LitElement {
         }
         .mdc-data-table__content {
           font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.25rem;
           font-weight: 400;
@@ -1049,8 +1049,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__cell {
           font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.25rem;
           font-weight: 400;
@@ -1171,8 +1171,8 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__header-cell {
           font-family: var(--ha-font-family-body);
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -webkit-font-smoothing: var(--ha-font-smoothing);
           font-size: 0.875rem;
           line-height: 1.375rem;
           font-weight: 500;
diff --git a/src/components/ha-base-time-input.ts b/src/components/ha-base-time-input.ts
index 0839cf05c3..df0e9389ce 100644
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -381,8 +381,8 @@ export class HaBaseTimeInput extends LitElement {
       border-bottom-width: 1px;
     }
     label {
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+      -webkit-font-smoothing: var(--ha-font-smoothing);
       font-family: var(
         --mdc-typography-body2-font-family,
         var(--mdc-typography-font-family, var(--ha-font-family-body))
diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts
index 9d0adcbc86..35615e3e74 100644
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -68,7 +68,8 @@ export class HaSettingsRow extends LitElement {
         --mdc-typography-body2-font-family,
         var(--mdc-typography-font-family, var(--ha-font-family-body))
       );
-      -webkit-font-smoothing: antialiased;
+      -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--mdc-typography-body2-font-size, 0.875rem);
       font-weight: var(--mdc-typography-body2-font-weight, 400);
       line-height: normal;
diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts
index 30a5dd46de..e430345b5f 100644
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@@ -8,8 +8,8 @@ export const configFlowContentStyles = css`
     padding: 0 24px;
     padding-inline-start: 24px;
     padding-inline-end: 24px;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+    -webkit-font-smoothing: var(--ha-font-smoothing);
     font-family: var(
       --mdc-typography-headline6-font-family,
       var(--mdc-typography-font-family, var(--ha-font-family-body))
diff --git a/src/dialogs/notifications/notification-item-template.ts b/src/dialogs/notifications/notification-item-template.ts
index b12c8ff73d..b2bb5cdeee 100644
--- a/src/dialogs/notifications/notification-item-template.ts
+++ b/src/dialogs/notifications/notification-item-template.ts
@@ -27,6 +27,7 @@ export class HuiNotificationItemTemplate extends LitElement {
     ha-card .header {
       font-family: var(--ha-font-family-body);
       -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--ha-font-size-2xl);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-condensed);
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index af4033b42f..d9b5fbdff4 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -1543,6 +1543,7 @@ export class HaConfigDevicePage extends LitElement {
           margin: 0;
           font-family: var(--ha-font-family-body);
           -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           font-size: var(--ha-font-size-2xl);
           font-weight: var(--ha-font-weight-normal);
           line-height: var(--ha-line-height-condensed);
diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts
index c21d18e103..fcf6351d48 100644
--- a/src/panels/config/ha-config-section.ts
+++ b/src/panels/config/ha-config-section.ts
@@ -63,6 +63,7 @@ export class HaConfigSection extends LitElement {
     .header {
       font-family: var(--ha-font-family-body);
       -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--ha-font-size-2xl);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-condensed);
@@ -76,6 +77,7 @@ export class HaConfigSection extends LitElement {
     .intro {
       font-family: var(--ha-font-family-body);
       -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-normal);
       width: 100%;
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
index 11f7d077d1..ea9dc214ae 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@@ -168,6 +168,7 @@ export class ZHAAddGroupPage extends LitElement {
         .header {
           font-family: var(--ha-font-family-body);
           -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           font-size: var(--ha-font-size-4xl);
           font-weight: var(--ha-font-weight-normal);
           line-height: var(--ha-line-height-condensed);
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
index c1c95f6763..4b69c4ca42 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
@@ -295,6 +295,7 @@ export class ZHAGroupPage extends LitElement {
         .header {
           font-family: var(--ha-font-family-body);
           -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           font-size: var(--ha-font-size-4xl);
           font-weight: var(--ha-font-weight-normal);
           line-height: var(--ha-line-height-condensed);
diff --git a/src/panels/config/voice-assistants/dialog-expose-entity.ts b/src/panels/config/voice-assistants/dialog-expose-entity.ts
index 741feaffc2..1b867aa20c 100644
--- a/src/panels/config/voice-assistants/dialog-expose-entity.ts
+++ b/src/panels/config/voice-assistants/dialog-expose-entity.ts
@@ -196,7 +196,8 @@ class DialogExposeEntity extends LitElement {
         .header {
           margin: 0;
           pointer-events: auto;
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           font-weight: inherit;
           font-size: inherit;
           box-sizing: border-box;
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 143a72215e..7e40413082 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -323,7 +323,8 @@ ${type === "object"
 
         .rendered {
           font-family: var(--ha-font-family-code);
-          -webkit-font-smoothing: antialiased;
+          -webkit-font-smoothing: var(--ha-font-smoothing);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
           clear: both;
           white-space: pre-wrap;
           background-color: var(--secondary-background-color);
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts
index d6996a6836..7a506b00ec 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.ts
+++ b/src/panels/lovelace/cards/hui-plant-status-card.ts
@@ -180,6 +180,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
     .header {
       font-family: var(--ha-font-family-body);
       -webkit-font-smoothing: var(--ha-font-smoothing);
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
       font-size: var(--ha-font-size-2xl);
       font-weight: var(--ha-font-weight-normal);
       line-height: var(--ha-line-height-condensed);
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index d2c28db8b7..f6207007cb 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -18,6 +18,7 @@ export const haStyle = css`
   :host {
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-m);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-normal);
@@ -36,6 +37,7 @@ export const haStyle = css`
   h1 {
     font-family: var(--ha-font-family-heading);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-2xl);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-condensed);
@@ -44,6 +46,7 @@ export const haStyle = css`
   h2 {
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -55,6 +58,7 @@ export const haStyle = css`
   h3 {
     font-family: var(--ha-font-family-body);
     -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
     font-size: var(--ha-font-size-l);
     font-weight: var(--ha-font-weight-normal);
     line-height: var(--ha-line-height-normal);
diff --git a/src/resources/theme/typography.globals.ts b/src/resources/theme/typography.globals.ts
index 6ee986ffb1..e3fb90ab9a 100644
--- a/src/resources/theme/typography.globals.ts
+++ b/src/resources/theme/typography.globals.ts
@@ -37,6 +37,7 @@ export const typographyStyles = css`
     --ha-line-height-expanded: 2;
 
     --ha-font-smoothing: antialiased;
+    --ha-moz-osx-font-smoothing: grayscale;
   }
 `;
 
@@ -44,5 +45,15 @@ export const typographyDerivedVariables = extractDerivedVars(typographyStyles);
 
 export const haFontFamilyBody = extractVar(
   typographyStyles,
-  "font-family-body"
+  "ha-font-family-body"
+);
+
+export const haFontSmoothing = extractVar(
+  typographyStyles,
+  "ha-font-smoothing"
+);
+
+export const haMozOsxFontSmoothing = extractVar(
+  typographyStyles,
+  "ha-moz-osx-font-smoothing"
 );