diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
index 2d6b3d27f5d..358edf48e59 100644
--- a/core/src/css/ionic/core.ionic.scss
+++ b/core/src/css/ionic/core.ionic.scss
@@ -22,7 +22,7 @@
 }
 
 html {
-  --ionic-dynamic-font: -apple-system-body;
+  --ion-dynamic-font: -apple-system-body;
 }
 
 body {
diff --git a/core/src/css/ionic/typography.ionic.scss b/core/src/css/ionic/typography.ionic.scss
index cb746952ecf..703579f366c 100644
--- a/core/src/css/ionic/typography.ionic.scss
+++ b/core/src/css/ionic/typography.ionic.scss
@@ -1,10 +1,18 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 
-// TODO(ROU-10833): add font loading solution here, as a @font-face, base64 or cdn
 html {
   font-family: globals.$ion-font-family;
 }
 
+// Dynamic Type is an iOS-only feature, so
+// this should only be enabled on iOS devices.
+@supports (-webkit-touch-callout: none) {
+  html {
+    font: var(--ion-dynamic-font, 16px #{globals.$ion-font-family});
+    font-family: globals.$ion-font-family;
+  }
+}
+
 body {
   @include globals.typography(globals.$ion-body-md-regular);
 }