diff --git a/UNRELEASED-v8.md b/UNRELEASED-v8.md
index 5f23912fd7a..be484683e32 100644
--- a/UNRELEASED-v8.md
+++ b/UNRELEASED-v8.md
@@ -34,6 +34,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 - Removed the border-radius() function and replaced any instances with tokens ([#4793](https://github.com/Shopify/polaris-react/pull/4793))
 - Removed the shadow() function (replaced any instances with tokens) and renamed shadow legacy tokens ([#4823](https://github.com/Shopify/polaris-react/pull/4823))
 - Removed the ms-high-contrast-color() function and replaced any instances with values ([#4938](https://github.com/Shopify/polaris-react/pull/4938))
+- Removed the font-family() function and replaced any instances with tokens ([#4940](https://github.com/Shopify/polaris-react/pull/4940))
 
 ### New components
 
diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss
index 2d6b15597c1..eb3bfa2b976 100644
--- a/src/components/AppProvider/AppProvider.scss
+++ b/src/components/AppProvider/AppProvider.scss
@@ -17,7 +17,7 @@ body {
 html,
 body,
 button {
-  font-family: font-family();
+  font-family: var(--p-font-family-sans);
 }
 
 html {
diff --git a/src/components/CustomProperties/tests/CustomProperties.test.tsx b/src/components/CustomProperties/tests/CustomProperties.test.tsx
index 40fc0d8d2ce..87c99a7c2b8 100644
--- a/src/components/CustomProperties/tests/CustomProperties.test.tsx
+++ b/src/components/CustomProperties/tests/CustomProperties.test.tsx
@@ -39,9 +39,7 @@ const mockTokens: Tokens = {
   motion: mockTokenGroup,
   // Note: We don't need to assign mock values to the remaining static tokens.
   depth: {},
-  fontSize: {},
   legacyTokens: {},
-  lineHeight: {},
   shape: {},
   spacing: {},
   typography: {},
diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss
index fa48582ff22..16c990e53b0 100644
--- a/src/components/KeyboardKey/KeyboardKey.scss
+++ b/src/components/KeyboardKey/KeyboardKey.scss
@@ -12,7 +12,7 @@ $key-base-height: 24px;
     0 var(--p-space-05) 0 0 var(--p-surface),
     0 var(--p-space-05) 0 1px var(--p-border-subdued);
   border-radius: var(--p-border-radius-1);
-  font-family: font-family();
+  font-family: var(--p-font-family-sans);
   font-size: 12px;
   font-weight: var(--p-font-weight-medium);
   line-height: $key-base-height;
diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
index 7e5e1811207..9346ab7fad7 100644
--- a/src/components/TextField/TextField.scss
+++ b/src/components/TextField/TextField.scss
@@ -97,7 +97,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
   padding: control-vertical-padding() $backdrop-horizontal-spacing;
   background: none;
   border: border(transparent);
-  font-family: font-family();
+  font-family: var(--p-font-family-sans);
   appearance: none;
   caret-color: var(--p-text);
   color: var(--p-text);
@@ -302,5 +302,5 @@ $prefix-horizontal-spacing: var(--p-space-2);
 }
 
 .monospaced {
-  font-family: font-family($family: 'monospace');
+  font-family: var(--p-font-family-mono);
 }
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
index 31f1bbb9e49..d7d99ada3bd 100644
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -7,7 +7,6 @@
 @import './foundation/utilities';
 @import './foundation/borders';
 @import './foundation/layout';
-@import './foundation/typography';
 @import './foundation/focus-ring';
 @import './foundation/accessibility';
 
diff --git a/src/styles/_public-api.scss b/src/styles/_public-api.scss
index c1738f3df0a..4ca6e299bdd 100644
--- a/src/styles/_public-api.scss
+++ b/src/styles/_public-api.scss
@@ -19,7 +19,6 @@
 @import './foundation/utilities';
 @import './foundation/borders';
 @import './foundation/layout';
-@import './foundation/typography';
 @import './foundation/focus-ring';
 
 @import './shared/accessibility';
diff --git a/src/styles/foundation/_typography.scss b/src/styles/foundation/_typography.scss
deleted file mode 100644
index 0cddfa1ed8b..00000000000
--- a/src/styles/foundation/_typography.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-$typography-condensed: em(640px);
-
-$font-family-data: (
-  base: #{-apple-system,
-  'BlinkMacSystemFont',
-  'San Francisco',
-  'Segoe UI',
-  'Roboto',
-  'Helvetica Neue',
-  sans-serif},
-  monospace: #{ui-monospace,
-  SFMono-Regular,
-  SF Mono,
-  Consolas,
-  Liberation Mono,
-  Menlo,
-  monospace},
-);
-
-/// Returns the font stack for a given family.
-///
-/// @param {String} $family - The key for the given family.
-/// @return {Number} The font stack for the family.
-
-@function font-family($family: base) {
-  $fetched-value: map-get($font-family-data, $family);
-
-  @if $fetched-value {
-    @return $fetched-value;
-  } @else {
-    @error 'Font family `#{$family}` not found. Available font families: #{available-names($font-family-data)}';
-  }
-}
diff --git a/src/tokens/token-groups/font-size.json b/src/tokens/token-groups/font-size.json
deleted file mode 100644
index 96c489a4ab1..00000000000
--- a/src/tokens/token-groups/font-size.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "font-size-1": "12px",
-  "font-size-2": "13px",
-  "font-size-3": "14px",
-  "font-size-4": "15px",
-  "font-size-5": "16px",
-  "font-size-6": "17px",
-  "font-size-7": "20px",
-  "font-size-8": "21px",
-  "font-size-9": "24px",
-  "font-size-10": "26px",
-  "font-size-11": "27px",
-  "font-size-12": "28px",
-  "font-size-13": "42px"
-}
diff --git a/src/tokens/token-groups/line-height.json b/src/tokens/token-groups/line-height.json
deleted file mode 100644
index 15623d86db5..00000000000
--- a/src/tokens/token-groups/line-height.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "line-height-1": "16px",
-  "line-height-2": "20px",
-  "line-height-3": "24px",
-  "line-height-4": "28px",
-  "line-height-5": "32px",
-  "line-height-6": "36px",
-  "line-height-7": "44px"
-}
diff --git a/src/tokens/token-groups/typography.json b/src/tokens/token-groups/typography.json
index 3aa584f2bf3..861dd03e719 100644
--- a/src/tokens/token-groups/typography.json
+++ b/src/tokens/token-groups/typography.json
@@ -1,6 +1,31 @@
 {
+  "font-family-sans": "-apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
+  "font-family-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace",
+
+  "font-size-1": "12px",
+  "font-size-2": "13px",
+  "font-size-3": "14px",
+  "font-size-4": "15px",
+  "font-size-5": "16px",
+  "font-size-6": "17px",
+  "font-size-7": "20px",
+  "font-size-8": "21px",
+  "font-size-9": "24px",
+  "font-size-10": "26px",
+  "font-size-11": "27px",
+  "font-size-12": "28px",
+  "font-size-13": "42px",
+
   "font-weight-regular": "400",
   "font-weight-medium": "500",
   "font-weight-semibold": "600",
-  "font-weight-bold": "700"
+  "font-weight-bold": "700",
+
+  "line-height-1": "16px",
+  "line-height-2": "20px",
+  "line-height-3": "24px",
+  "line-height-4": "28px",
+  "line-height-5": "32px",
+  "line-height-6": "36px",
+  "line-height-7": "44px"
 }
diff --git a/src/tokens/tokens.ts b/src/tokens/tokens.ts
index 7ddcc02fe6e..1acc22d3bc9 100644
--- a/src/tokens/tokens.ts
+++ b/src/tokens/tokens.ts
@@ -1,9 +1,7 @@
 import depth from './token-groups/depth.json';
 import legacyTokens from './token-groups/legacy-tokens.json';
 import darkColorScheme from './token-groups/color.dark.json';
-import fontSize from './token-groups/font-size.json';
 import lightColorScheme from './token-groups/color.light.json';
-import lineHeight from './token-groups/line-height.json';
 import motion from './token-groups/motion.json';
 import shape from './token-groups/shape.json';
 import spacing from './token-groups/spacing.json';
@@ -51,9 +49,7 @@ const colorSchemes: ColorSchemes = {
 export interface Tokens {
   depth: TokenGroup;
   colorSchemes: ColorSchemes;
-  fontSize: TokenGroup;
   legacyTokens: TokenGroup;
-  lineHeight: TokenGroup;
   motion: TokenGroup;
   shape: TokenGroup;
   spacing: TokenGroup;
@@ -64,12 +60,10 @@ export interface Tokens {
 export const tokens: Tokens = {
   colorSchemes,
   depth,
-  fontSize: tokensToRems(fontSize),
   legacyTokens: tokensToRems(legacyTokens),
-  lineHeight: tokensToRems(lineHeight),
   motion,
   shape: tokensToRems(shape),
   spacing: tokensToRems(spacing),
-  typography,
+  typography: tokensToRems(typography),
   zIndex,
 };