diff --git a/packages/gamut-styles/core/_fonts.scss b/packages/gamut-styles/core/_fonts.scss
index 32097abc974..db1f4b32abb 100644
--- a/packages/gamut-styles/core/_fonts.scss
+++ b/packages/gamut-styles/core/_fonts.scss
@@ -89,3 +89,43 @@
   src: url("../fonts/Suisse/SuisseIntlMono-Bold-WebS.woff2") format("woff2"),
     url("../fonts/Suisse/SuisseIntlMono-Bold-WebS.woff") format("woff");
 }
+
+@font-face {
+  font-display: swap;
+  font-family: "Hanken Grotesk";
+  font-style: normal;
+  font-weight: normal;
+  src: url("../fonts/Hanken_Grotesk/hanken-grotesk-regular.woff2")
+      format("woff2"),
+    url("../fonts/Hanken_Grotesk/hanken-grotesk-regular.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Hanken Grotesk";
+  font-style: normal;
+  font-weight: bold;
+  src: url("../fonts/Hanken_Grotesk/hanken-grotesk-bold.woff2") format("woff2"),
+    url("../fonts/Hanken_Grotesk/hanken-grotesk-bold.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Hanken Grotesk";
+  font-style: italic;
+  font-weight: normal;
+  src: url("../fonts/Hanken_Grotesk/hanken-grotesk-italic.woff2")
+      format("woff2"),
+    url("../fonts/Hanken_Grotesk/hanken-grotesk-italic.woff") format("woff");
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Hanken Grotesk";
+  font-style: italic;
+  font-weight: bold;
+  src: url("../fonts/Hanken_Grotesk/hanken-grotesk-bold-italic.woff2")
+      format("woff2"),
+    url("../fonts/Hanken_Grotesk/hanken-grotesk-bold-italic.woff")
+      format("woff");
+}
diff --git a/packages/gamut-styles/src/remoteAssets/fonts.ts b/packages/gamut-styles/src/remoteAssets/fonts.ts
index 8fbf4e2a7f9..9ec541e55f2 100644
--- a/packages/gamut-styles/src/remoteAssets/fonts.ts
+++ b/packages/gamut-styles/src/remoteAssets/fonts.ts
@@ -95,4 +95,31 @@ export const percipio: readonly FontConfig[] = [
   },
 ];
 
-export const webFonts = { core, percipio } as const;
+export const lxStudio: readonly FontConfig[] = [
+  {
+    filePath: `${FONT_ASSET_PATH}/hanken-grotesk-regular`,
+    extensions,
+    name: 'Hanken Grotesk',
+  },
+  {
+    filePath: `${FONT_ASSET_PATH}/hanken-grotesk-italic`,
+    extensions,
+    name: 'Hanken Grotesk',
+    style: 'italic',
+  },
+  {
+    filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold`,
+    extensions,
+    name: 'Hanken Grotesk',
+    weight: 'bold',
+  },
+  {
+    filePath: `${FONT_ASSET_PATH}/hanken-grotesk-bold-italic`,
+    extensions,
+    name: 'Hanken Grotesk',
+    weight: 'bold',
+    style: 'italic',
+  },
+];
+
+export const webFonts = { core, percipio, lxStudio } as const;
diff --git a/packages/gamut-styles/src/themes/lxStudio.ts b/packages/gamut-styles/src/themes/lxStudio.ts
index 721afa69626..b37c060884c 100644
--- a/packages/gamut-styles/src/themes/lxStudio.ts
+++ b/packages/gamut-styles/src/themes/lxStudio.ts
@@ -1,7 +1,7 @@
 import { createTheme } from '@codecademy/variance';
 
 import {
-  fontBase,
+  fontLxStudio,
   fontMonospace,
   fontSystem,
   lxStudioPalette,
@@ -14,8 +14,8 @@ import { coreTheme } from './core';
  */
 
 const lxStudioFontFamily = {
-  accent: fontBase,
-  base: fontBase,
+  accent: fontLxStudio,
+  base: fontLxStudio,
   monospace: fontMonospace,
   system: fontSystem,
 } as const;
diff --git a/packages/gamut-styles/src/variables/typography.ts b/packages/gamut-styles/src/variables/typography.ts
index 9abfe14696c..e096c1b342a 100644
--- a/packages/gamut-styles/src/variables/typography.ts
+++ b/packages/gamut-styles/src/variables/typography.ts
@@ -14,6 +14,10 @@ monospace`;
 export const fontSystem = `-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu",
 "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif`;
 
+export const fontLxStudio = `"Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
+"Roboto", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+sans-serif`;
+
 export const fontFamily = {
   accent: fontAccent,
   base: fontBase,