diff --git a/.changeset/poppins-heading-font.md b/.changeset/poppins-heading-font.md
new file mode 100644
index 000000000..f7bb91569
--- /dev/null
+++ b/.changeset/poppins-heading-font.md
@@ -0,0 +1,6 @@
+---
+'@drivenets/design-system': patch
+'@drivenets/vite-plugin-design-system': patch
+---
+
+Switch heading typography to the Poppins font across the type scale and load Poppins via the Google Fonts loader
diff --git a/packages/design-system/src/styles/_root.scss b/packages/design-system/src/styles/_root.scss
index 1a479fd84..1a84f035b 100644
--- a/packages/design-system/src/styles/_root.scss
+++ b/packages/design-system/src/styles/_root.scss
@@ -497,5 +497,5 @@
/* string */
--font-family-base: Roboto;
--font-family-code: Fira Mono;
- --font-family-heading: Roboto;
+ --font-family-heading: Poppins;
}
diff --git a/packages/design-system/src/styles/_typography.scss b/packages/design-system/src/styles/_typography.scss
index 7b0f4455c..92395eed3 100644
--- a/packages/design-system/src/styles/_typography.scss
+++ b/packages/design-system/src/styles/_typography.scss
@@ -164,6 +164,7 @@
@mixin heading($font-weight: var(--heading-font-size-3xl), $line-height: var(--heading-line-height-3xl)) {
@include font-base;
+ font-family: var(--font-family-heading);
font-size: $font-weight;
font-weight: var(--font-weight-semi-bold);
line-height: $line-height;
diff --git a/packages/vite-plugin/src/__tests__/__snapshots__/index.test.ts.snap b/packages/vite-plugin/src/__tests__/__snapshots__/index.test.ts.snap
index 5282e5771..570bd1d3b 100644
--- a/packages/vite-plugin/src/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/vite-plugin/src/__tests__/__snapshots__/index.test.ts.snap
@@ -7,6 +7,8 @@ exports[`vite-plugin-design-system > should inject fonts into index.html 1`] = `
+
+
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
index 1a6852cb2..a2f3ef2aa 100644
--- a/packages/vite-plugin/src/index.ts
+++ b/packages/vite-plugin/src/index.ts
@@ -4,6 +4,7 @@ export const fontPreconnectURLs = ['https://fonts.googleapis.com', 'https://font
export const fontStylesheetURLs = [
'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,900&display=swap',
+ 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap',
'https://fonts.googleapis.com/css2?family=Fira+Mono:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap',
'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block',
'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0..1,0&display=block',