diff --git a/docs/pages/2.theming.md b/docs/pages/2.theming.md
index 0e109906b1..cb2125e514 100644
--- a/docs/pages/2.theming.md
+++ b/docs/pages/2.theming.md
@@ -132,7 +132,7 @@ A theme usually contains the following properties:
     - `inversePrimary`
     - `backdrop`
 
-- `typescale` (`object`): various fonts styling properties under the text variant key used in component.
+- `fonts` (`object`): various fonts styling properties under the text variant key used in component.
   - [`variant` e.g. `labelMedium`] (`object`):
     - `fontFamily`
     - `letterSpacing`
@@ -313,7 +313,7 @@ function MyComponent(props) {
 
 ## Customizing all instances of a component
 
-Sometimes you want to style a component in a different way everywhere, but don't want to change the properties in the theme, so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change `theme.typescale.labelLarge` because it affects other components.
+Sometimes you want to style a component in a different way everywhere, but don't want to change the properties in the theme, so that other components are not affected. For example, say you want to change the font for all your buttons, but don't want to change `theme.fonts.labelLarge` because it affects other components.
 
 We don't have an API to do this, because you can already do it with components:
 
@@ -322,7 +322,7 @@ import * as React from 'react';
 import { Button } from 'react-native-paper';
 
 export default function FancyButton(props) {
-  return <Button theme={{ typescale: { labelLarge: {letterSpacing: 1 } } }} {...props} />;
+  return <Button theme={{ fonts: { labelLarge: {letterSpacing: 1 } } }} {...props} />;
 }
 ```
 
diff --git a/src/components/Appbar/AppbarContent.tsx b/src/components/Appbar/AppbarContent.tsx
index f7f297d17f..3c09f40e62 100644
--- a/src/components/Appbar/AppbarContent.tsx
+++ b/src/components/Appbar/AppbarContent.tsx
@@ -127,7 +127,7 @@ const AppbarContent = ({
             {
               color: titleTextColor,
               ...(isV3
-                ? theme.typescale[variant]
+                ? theme.fonts[variant]
                 : Platform.OS === 'ios'
                 ? theme.fonts.regular
                 : theme.fonts.medium),
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index f1f3a5b0e4..b98b8fde42 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -260,10 +260,13 @@ const Button = ({
   const { color: customLabelColor, fontSize: customLabelSize } =
     StyleSheet.flatten(labelStyle) || {};
 
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+
   const textStyle = {
     color: textColor,
-    ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
+    ...font,
   };
+
   const iconStyle =
     StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse'
       ? [
diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
index 150e433cf2..a13961707c 100644
--- a/src/components/Drawer/DrawerItem.tsx
+++ b/src/components/Drawer/DrawerItem.tsx
@@ -98,6 +98,7 @@ const DrawerItem = ({
         .rgb()
         .toString()
     : undefined;
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
 
   return (
     <View {...rest}>
@@ -130,7 +131,7 @@ const DrawerItem = ({
                 {
                   color: contentColor,
                   marginLeft: labelMargin,
-                  ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
+                  ...font,
                 },
               ]}
             >
diff --git a/src/components/Drawer/DrawerSection.tsx b/src/components/Drawer/DrawerSection.tsx
index 7fb5f436b0..1d24e62594 100644
--- a/src/components/Drawer/DrawerSection.tsx
+++ b/src/components/Drawer/DrawerSection.tsx
@@ -65,6 +65,8 @@ const DrawerSection = ({ children, title, theme, style, ...rest }: Props) => {
     ? theme.colors.onSurfaceVariant
     : color(theme.colors.text).alpha(0.54).rgb().string();
   const titleMargin = isV3 ? 28 : 16;
+  const font = isV3 ? theme.fonts.titleSmall : theme.fonts.medium;
+
   return (
     <View style={[styles.container, style]} {...rest}>
       {title && (
@@ -77,7 +79,7 @@ const DrawerSection = ({ children, title, theme, style, ...rest }: Props) => {
                 {
                   color: titleColor,
                   marginLeft: titleMargin,
-                  ...(isV3 ? theme.typescale.titleSmall : theme.fonts.medium),
+                  ...font,
                 },
               ]}
             >
diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx
index f4c44618a8..30863fc3de 100644
--- a/src/components/FAB/AnimatedFAB.tsx
+++ b/src/components/FAB/AnimatedFAB.tsx
@@ -291,9 +291,11 @@ const AnimatedFAB = ({
     animFAB,
   });
 
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+
   const textStyle = {
     color: foregroundColor,
-    ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
+    ...font,
   };
 
   const md2Elevation = disabled || !isIOS ? 0 : 6;
diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index 166ed74512..978c939b32 100644
--- a/src/components/FAB/FAB.tsx
+++ b/src/components/FAB/FAB.tsx
@@ -207,12 +207,13 @@ const FAB = ({
   const isFlatMode = mode === 'flat';
   const iconSize = isLargeSize ? 36 : 24;
   const loadingIndicatorSize = isLargeSize ? 24 : 18;
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
 
   const fabStyle = getFabStyle({ customSize, size, theme });
   const extendedStyle = getExtendedFabStyle({ customSize, theme });
   const textStyle = {
     color: foregroundColor,
-    ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
+    ...font,
   };
 
   const { borderRadius = fabStyle.borderRadius } = (StyleSheet.flatten(style) ||
diff --git a/src/components/List/ListSubheader.tsx b/src/components/List/ListSubheader.tsx
index 228c56415a..7683f1b15e 100644
--- a/src/components/List/ListSubheader.tsx
+++ b/src/components/List/ListSubheader.tsx
@@ -36,6 +36,8 @@ const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {
     ? theme.colors.onSurfaceVariant
     : color(theme.colors.text).alpha(0.54).rgb().string();
 
+  const font = theme.isV3 ? theme.fonts.bodyMedium : theme.fonts.medium;
+
   return (
     <Text
       variant="bodyMedium"
@@ -45,7 +47,7 @@ const ListSubheader = ({ style, theme: overrideTheme, ...rest }: Props) => {
         styles.container,
         {
           color: textColor,
-          ...(theme.isV3 ? theme.typescale.bodyMedium : theme.fonts.medium),
+          ...font,
         },
         style,
       ]}
diff --git a/src/components/TextInput/TextInputFlat.tsx b/src/components/TextInput/TextInputFlat.tsx
index 926dacaa6b..1f271ee319 100644
--- a/src/components/TextInput/TextInputFlat.tsx
+++ b/src/components/TextInput/TextInputFlat.tsx
@@ -74,7 +74,7 @@ const TextInputFlat = ({
 }: ChildTextInputProps) => {
   const isAndroid = Platform.OS === 'android';
   const { colors, isV3, roundness } = theme;
-  const font = isV3 ? theme.typescale.bodyLarge : theme.fonts.regular;
+  const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
   const { LABEL_PADDING_TOP, FLAT_INPUT_OFFSET, MIN_HEIGHT } =
diff --git a/src/components/TextInput/TextInputOutlined.tsx b/src/components/TextInput/TextInputOutlined.tsx
index 6324e59568..6e4eb72d18 100644
--- a/src/components/TextInput/TextInputOutlined.tsx
+++ b/src/components/TextInput/TextInputOutlined.tsx
@@ -74,7 +74,7 @@ const TextInputOutlined = ({
   const adornmentConfig = getAdornmentConfig({ left, right });
 
   const { colors, isV3, roundness } = theme;
-  const font = isV3 ? theme.typescale.bodyLarge : theme.fonts.regular;
+  const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
   const hasActiveOutline = parentState.focused || error;
 
   const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET } =
diff --git a/src/components/Typography/AnimatedText.tsx b/src/components/Typography/AnimatedText.tsx
index 092dbe81d0..db5f4f1aab 100644
--- a/src/components/Typography/AnimatedText.tsx
+++ b/src/components/Typography/AnimatedText.tsx
@@ -5,7 +5,6 @@ import {
   I18nManager,
   StyleProp,
   StyleSheet,
-  Platform,
 } from 'react-native';
 import { withTheme } from '../../core/theming';
 import { Font, MD3TypescaleKey, Theme } from '../../types';
@@ -45,12 +44,12 @@ function AnimatedText({ style, theme, variant, ...rest }: Props) {
     const stylesByVariant = Object.keys(MD3TypescaleKey).reduce(
       (acc, key) => {
         const { fontSize, fontWeight, lineHeight, letterSpacing, fontFamily } =
-          theme.typescale[key as keyof typeof MD3TypescaleKey];
+          theme.fonts[key as keyof typeof MD3TypescaleKey];
 
         return {
           ...acc,
           [key]: {
-            ...(Platform.OS === 'android' && { fontFamily }),
+            fontFamily,
             fontSize,
             fontWeight,
             lineHeight: lineHeight,
diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
index b3e9e98375..a61ff36c88 100644
--- a/src/components/Typography/Text.tsx
+++ b/src/components/Typography/Text.tsx
@@ -93,7 +93,7 @@ const Text: React.ForwardRefRenderFunction<{}, Props> = (
     const stylesByVariant = Object.keys(MD3TypescaleKey).reduce(
       (acc, key) => {
         const { fontSize, fontWeight, lineHeight, letterSpacing, fontFamily } =
-          theme.typescale[key as keyof typeof MD3TypescaleKey];
+          theme.fonts[key as keyof typeof MD3TypescaleKey];
 
         return {
           ...acc,
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index d6c18c35dc..29539b6be1 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -55,9 +55,7 @@ exports[`renders list section with custom title style 1`] = `
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
       },
       "dark": false,
-      "isV3": true,
-      "roundness": 4,
-      "typescale": Object {
+      "fonts": Object {
         "bodyLarge": Object {
           "fontFamily": "System",
           "fontSize": 16,
@@ -164,6 +162,8 @@ exports[`renders list section with custom title style 1`] = `
           "lineHeight": 20,
         },
       },
+      "isV3": true,
+      "roundness": 4,
       "version": 3,
     }
   }
@@ -496,9 +496,7 @@ exports[`renders list section with subheader 1`] = `
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
       },
       "dark": false,
-      "isV3": true,
-      "roundness": 4,
-      "typescale": Object {
+      "fonts": Object {
         "bodyLarge": Object {
           "fontFamily": "System",
           "fontSize": 16,
@@ -605,6 +603,8 @@ exports[`renders list section with subheader 1`] = `
           "lineHeight": 20,
         },
       },
+      "isV3": true,
+      "roundness": 4,
       "version": 3,
     }
   }
@@ -935,9 +935,7 @@ exports[`renders list section without subheader 1`] = `
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
       },
       "dark": false,
-      "isV3": true,
-      "roundness": 4,
-      "typescale": Object {
+      "fonts": Object {
         "bodyLarge": Object {
           "fontFamily": "System",
           "fontSize": 16,
@@ -1044,6 +1042,8 @@ exports[`renders list section without subheader 1`] = `
           "lineHeight": 20,
         },
       },
+      "isV3": true,
+      "roundness": 4,
       "version": 3,
     }
   }
diff --git a/src/styles/__tests__/fonts.test.js b/src/styles/__tests__/fonts.test.js
new file mode 100644
index 0000000000..a7374380b8
--- /dev/null
+++ b/src/styles/__tests__/fonts.test.js
@@ -0,0 +1,63 @@
+import configureFonts, { fontConfig } from '../fonts';
+
+const mockPlatform = (OS) => {
+  jest.resetModules();
+  jest.doMock('react-native/Libraries/Utilities/Platform', () => ({
+    OS,
+    select: (objs) => objs[OS],
+  }));
+};
+
+const customFont = {
+  custom: {
+    fontFamily: 'sans-serif',
+    fontWeight: 'bold',
+  },
+};
+
+describe('configureFonts', () => {
+  it('adds custom fonts to the iOS config', () => {
+    mockPlatform('ios');
+    expect(
+      configureFonts({
+        ios: {
+          ...fontConfig.ios,
+          customFont,
+        },
+      })
+    ).toEqual({
+      ...fontConfig.ios,
+      customFont,
+    });
+  });
+
+  it('adds custom fonts to the Android config', () => {
+    mockPlatform('android');
+    expect(
+      configureFonts({
+        android: {
+          ...fontConfig.android,
+          customFont,
+        },
+      })
+    ).toEqual({
+      ...fontConfig.android,
+      customFont,
+    });
+  });
+
+  it('adds custom fonts to the Web config', () => {
+    mockPlatform('web');
+    expect(
+      configureFonts({
+        web: {
+          ...fontConfig.web,
+          customFont,
+        },
+      })
+    ).toEqual({
+      ...fontConfig.web,
+      customFont,
+    });
+  });
+});
diff --git a/src/styles/fonts.tsx b/src/styles/fonts.tsx
index a2b4c49620..71d2fbd321 100644
--- a/src/styles/fonts.tsx
+++ b/src/styles/fonts.tsx
@@ -1,7 +1,7 @@
 import { Platform, PlatformOSType } from 'react-native';
 import type { Fonts } from '../types';
 
-const fontConfig = {
+export const fontConfig = {
   web: {
     regular: {
       fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
diff --git a/src/styles/themes/v3/LightTheme.tsx b/src/styles/themes/v3/LightTheme.tsx
index 9496c93999..e3b60a6f60 100644
--- a/src/styles/themes/v3/LightTheme.tsx
+++ b/src/styles/themes/v3/LightTheme.tsx
@@ -57,7 +57,7 @@ export const MD3LightTheme: MD3Theme = {
       level5: 'rgb(233, 227, 241)', // palette.primary40, alpha 0.14
     },
   },
-  typescale,
+  fonts: typescale,
   animation: {
     scale: 1.0,
   },
diff --git a/src/types.tsx b/src/types.tsx
index 4a4acb5990..47ea3c8f24 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -90,7 +90,7 @@ export type MD3Theme = ThemeBase & {
   version: 3;
   isV3: true;
   colors: MD3Colors;
-  typescale: MD3Typescale;
+  fonts: MD3Typescale;
 };
 
 export type MD2Theme = ThemeBase & {