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',