diff --git a/docs/layout/dynamic-font-scaling.md b/docs/layout/dynamic-font-scaling.md
index 4a8aed65b7d..74d365c0457 100644
--- a/docs/layout/dynamic-font-scaling.md
+++ b/docs/layout/dynamic-font-scaling.md
@@ -2,8 +2,6 @@
 
 Dynamic Font Scaling is a feature that allows users to choose the size of the text displayed on the screen. This helps users who need larger text for better readability, and it also accommodates users who can read smaller text.
 
-Dynamic Font Scaling is supported on Android, iOS, and iPadOS starting in Ionic v7.5.
-
 ## Try It Out
 
 :::tip
@@ -18,35 +16,11 @@ import DynamicFontScaling from '@site/static/usage/v8/layout/dynamic-font-scalin
 
 <DynamicFontScaling />
 
-## Enabling Dynamic Font Scaling in Ionic
-
-:::info
-This feature is currently opt-in on iOS. However, it will be enabled by default starting in Ionic 8 at which point the following CSS will no longer be necessary.
-:::
-
-Dynamic Font Scaling is already enabled by default on Android. Developers can enable it on iOS using the following steps:
-
-1. Ensure that the [typography.css](/docs/layout/global-stylesheets#typographycss) file is imported.
-2. Add the following CSS to a global stylesheet:
-
-```css
-html {
-  --ion-dynamic-font: var(--ion-default-dynamic-font);
-}
-```
-
-:::note
-Under the hood, Ionic sets the following CSS on iOS devices to enable Dynamic Font Scaling:
-
-```css
-html {
-  font: var(--ion-dynamic-font);
-}
-```
+## Using Dynamic Font Scaling
 
-:::
+### Enabling in an Application
 
-## Using Dynamic Font Scaling
+Dynamic Font Scaling is enabled by default as long as the [typography.css](/docs/layout/global-stylesheets#typographycss) file is imported. Importing this file will define the `--ion-dynamic-font` variable which will activate Dynamic Font Scaling. While not recommended, developers can opt-out of Dynamic Font Scaling by setting this variable to `initial` in their application code.
 
 ### Integrating Custom Components
 
@@ -192,7 +166,7 @@ The Chrome Web Browser on Android has some limitations with respecting system-le
 There are a number of reasons why Dynamic Font Scaling may not have any effect on an app. The following list, while not exhaustive, provides some things to check to debug why Dynamic Font Scaling is not working.
 
 1. Verify that your version of Ionic supports Dynamic Font Scaling. Dynamic Font Scaling was added starting in Ionic v7.5.
-2. Dynamic Font Scaling is opt-in on iOS in Ionic 7. Verify that the proper CSS has been set. See [Enabling Dynamic Font Scaling in Ionic](#enabling-dynamic-font-scaling-in-ionic) for more information.
+2. Verify that the [typography.css](/docs/layout/global-stylesheets#typographycss) file has been imported. This file is required for Dynamic Font Scaling to work.
 3. Verify that your code does not override the root element's default font size. Manually setting a font size on the root element will prevent Dynamic Font Scaling from working as intended.
 4. Verify that your code does not override font sizes on Ionic components. Ionic components that set `font-size` rules will use `rem` units. However, if your app overrides that to use `px`, then that custom rule will need to be converted to use `rem`. See [Integrating Custom Components](#integrating-custom-components) for more information.
 5. Verify "Accessibility Page Zoom" is enabled if using Chrome for Android. See [Chrome for Android](#chrome-for-android) for more information.
diff --git a/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_html.md b/static/usage/v8/layout/dynamic-font-scaling/angular.md
similarity index 100%
rename from static/usage/v8/layout/dynamic-font-scaling/angular/example_component_html.md
rename to static/usage/v8/layout/dynamic-font-scaling/angular.md
diff --git a/static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md b/static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md
deleted file mode 100644
index 2817f808062..00000000000
--- a/static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```css
-html {
-  --ion-dynamic-font: var(--ion-default-dynamic-font);
-}
-```
diff --git a/static/usage/v8/layout/dynamic-font-scaling/demo.html b/static/usage/v8/layout/dynamic-font-scaling/demo.html
index 4f339559b7c..c3f2def33bd 100644
--- a/static/usage/v8/layout/dynamic-font-scaling/demo.html
+++ b/static/usage/v8/layout/dynamic-font-scaling/demo.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Label</title>
+    <title>Dynamic Font Scaling</title>
     <link rel="stylesheet" href="../../common.css" />
     <script src="../../common.js"></script>
     <script
@@ -14,11 +14,6 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@ionic/core@7.3.4-dev.11694179936.1c55c492/css/ionic.bundle.css"
     />
-    <style>
-      html {
-        --ion-dynamic-font: var(--ion-default-dynamic-font);
-      }
-    </style>
   </head>
 
   <body>
diff --git a/static/usage/v8/layout/dynamic-font-scaling/index.md b/static/usage/v8/layout/dynamic-font-scaling/index.md
index 493ed60da20..824a9143111 100644
--- a/static/usage/v8/layout/dynamic-font-scaling/index.md
+++ b/static/usage/v8/layout/dynamic-font-scaling/index.md
@@ -1,32 +1,17 @@
 import Playground from '@site/src/components/global/Playground';
 
 import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
+import react from './react.md';
 import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
+import angular from './angular.md';
 
 <Playground
   version="8"
   code={{
     javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
+    react,
     vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      },
-    },
+    angular,
   }}
   src="usage/v8/layout/dynamic-font-scaling/demo.html"
   devicePreview={true}
diff --git a/static/usage/v8/layout/dynamic-font-scaling/javascript.md b/static/usage/v8/layout/dynamic-font-scaling/javascript.md
index 3240686f9c5..03ddb39e0c3 100644
--- a/static/usage/v8/layout/dynamic-font-scaling/javascript.md
+++ b/static/usage/v8/layout/dynamic-font-scaling/javascript.md
@@ -42,10 +42,4 @@
     <ion-title>Footer</ion-title>
   </ion-toolbar>
 </ion-footer>
-
-<style>
-  html {
-    --ion-dynamic-font: var(--ion-default-dynamic-font);
-  }
-</style>
 ```
diff --git a/static/usage/v8/layout/dynamic-font-scaling/react/main_tsx.md b/static/usage/v8/layout/dynamic-font-scaling/react.md
similarity index 100%
rename from static/usage/v8/layout/dynamic-font-scaling/react/main_tsx.md
rename to static/usage/v8/layout/dynamic-font-scaling/react.md
diff --git a/static/usage/v8/layout/dynamic-font-scaling/react/main_css.md b/static/usage/v8/layout/dynamic-font-scaling/react/main_css.md
deleted file mode 100644
index 2817f808062..00000000000
--- a/static/usage/v8/layout/dynamic-font-scaling/react/main_css.md
+++ /dev/null
@@ -1,5 +0,0 @@
-```css
-html {
-  --ion-dynamic-font: var(--ion-default-dynamic-font);
-}
-```
diff --git a/static/usage/v8/layout/dynamic-font-scaling/vue.md b/static/usage/v8/layout/dynamic-font-scaling/vue.md
index 5e0f13156c6..2c5a47e9cd2 100644
--- a/static/usage/v8/layout/dynamic-font-scaling/vue.md
+++ b/static/usage/v8/layout/dynamic-font-scaling/vue.md
@@ -89,10 +89,4 @@
     },
   });
 </script>
-
-<style>
-  html {
-    --ion-dynamic-font: var(--ion-default-dynamic-font);
-  }
-</style>
 ```