diff --git a/apps/website/global-styles.css b/apps/website/global-styles.css
index d32ec47d6..2de9d657b 100644
--- a/apps/website/global-styles.css
+++ b/apps/website/global-styles.css
@@ -13,7 +13,7 @@
 body {
   margin: 0;
   font-family:
-    Open Sans,
+    Inter,
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
diff --git a/packages/lib/src/heading/utils.ts b/packages/lib/src/heading/utils.ts
index dd90a3429..0f72fa4a6 100644
--- a/packages/lib/src/heading/utils.ts
+++ b/packages/lib/src/heading/utils.ts
@@ -24,6 +24,6 @@ export const getHeadingWeight = (weight: HeadingProps["weight"]) => {
     case "regular":
       return "var(--typography-heading-regular)";
     case "light":
-      return "var(--typography-heading-light)";
+      return "var(--typography-heading-extra-light)";
   }
 };
diff --git a/packages/lib/src/styles/fonts/Inter-Italic-VariableFont_opsz,wght.woff2 b/packages/lib/src/styles/fonts/Inter-Italic-VariableFont_opsz,wght.woff2
new file mode 100644
index 000000000..a9783a345
Binary files /dev/null and b/packages/lib/src/styles/fonts/Inter-Italic-VariableFont_opsz,wght.woff2 differ
diff --git a/packages/lib/src/styles/fonts/Inter-VariableFont_opsz,wght.woff2 b/packages/lib/src/styles/fonts/Inter-VariableFont_opsz,wght.woff2
new file mode 100644
index 000000000..d97bc1151
Binary files /dev/null and b/packages/lib/src/styles/fonts/Inter-VariableFont_opsz,wght.woff2 differ
diff --git a/packages/lib/src/styles/injectFonts.ts b/packages/lib/src/styles/injectFonts.ts
index 7f19619ca..5798a9577 100644
--- a/packages/lib/src/styles/injectFonts.ts
+++ b/packages/lib/src/styles/injectFonts.ts
@@ -5,6 +5,8 @@ import openSansLatinExt from "./fonts/Open-sans-latin-ext.woff2";
 import openSansSymbols from "./fonts/Open-sans-symbols.woff2";
 import openSansLatinItalic from "./fonts/Open-sans-latin-italic.woff2";
 import openSansLatinExtItalic from "./fonts/Open-sans-latin-ext-italic.woff2";
+import interVariable from "./fonts/Inter-VariableFont_opsz,wght.woff2";
+import interItalicVariable from "./fonts/Inter-Italic-VariableFont_opsz,wght.woff2";
 
 const FONT_FACE_ID = "halstack-material-symbols";
 
@@ -36,6 +38,22 @@ if (typeof document !== "undefined" && !document.getElementById(FONT_FACE_ID)) {
         -webkit-font-smoothing: antialiased;
     }
 
+    @font-face {
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url("${interVariable}") format('woff2');
+    }
+
+    @font-face {
+        font-family: 'Inter';
+        font-style: italic;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url("${interItalicVariable}") format('woff2');
+    }
+
     /* math */
     @font-face {
         font-family: 'Open Sans';
diff --git a/packages/lib/src/styles/tokens.ts b/packages/lib/src/styles/tokens.ts
index 41269be92..7c9d55563 100644
--- a/packages/lib/src/styles/tokens.ts
+++ b/packages/lib/src/styles/tokens.ts
@@ -161,7 +161,7 @@ export const coreTokens = {
   "--font-weight-semibold": "600",
   "--font-weight-bold": "700",
   "--font-family-mono": "Source Code Pro, mono",
-  "--font-family-sans": "Open Sans, sans-serif",
+  "--font-family-sans": "Inter, sans-serif",
   "--font-style-lightitalic": "light italic",
   "--font-style-normal": "normal",
   "--line-style-dashed": "dashed",
diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css
index 30020db62..5b2702139 100644
--- a/packages/lib/src/styles/variables.css
+++ b/packages/lib/src/styles/variables.css
@@ -156,12 +156,13 @@
   --font-size-40: 40px;
   --font-size-48: 48px;
   --font-size-60: 60px;
+  --font-weight-extra-light: 200;
   --font-weight-light: 300;
   --font-weight-regular: 400;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-family-mono: Source Code Pro, mono;
-  --font-family-sans: Open Sans, sans-serif;
+  --font-family-sans: Inter, sans-serif;
   --font-style-lightitalic: light italic;
   --font-style-normal: normal;
   --line-style-dashed: dashed;
@@ -360,7 +361,7 @@
   --typography-heading-l: var(--font-size-24);
   --typography-heading-xl: var(--font-size-32);
   --typography-heading-xxl: var(--font-size-40);
-  --typography-heading-light: var(--font-weight-light);
+  --typography-heading-extra-light: var(--font-weight-extra-light);
   --typography-heading-regular: var(--font-weight-regular);
   --typography-heading-semibold: var(--font-weight-semibold);
   --typography-helper-text-s: var(--font-size-12);
diff --git a/packages/lib/src/typography/Typography.stories.tsx b/packages/lib/src/typography/Typography.stories.tsx
index 3be31e8e9..ad0d2eebb 100644
--- a/packages/lib/src/typography/Typography.stories.tsx
+++ b/packages/lib/src/typography/Typography.stories.tsx
@@ -91,6 +91,9 @@ const Typography = () => (
       <DxcTypography display="block" fontWeight="400">
         400.
       </DxcTypography>
+      <DxcTypography display="block" fontWeight="500">
+        500.
+      </DxcTypography>
       <DxcTypography display="block" fontWeight="600">
         600.
       </DxcTypography>