diff --git a/src/components/text/_subheadlines.scss b/src/components/text/_subheadlines.scss index b90503f31..a56faa446 100644 --- a/src/components/text/_subheadlines.scss +++ b/src/components/text/_subheadlines.scss @@ -66,7 +66,8 @@ $subheadlineSizeRules: ( .sg-subheadline { @include subheadlineTypeSizeVariant(medium); - font-family: $fontFamilyUntitledSerif; + font-family: $fontFamilyPrimary; + font-feature-settings: $fontFeatureSettings; display: block; color: $black; font-weight: $fontWeightNormal; diff --git a/src/components/text/stories/text.stories.mdx b/src/components/text/stories/text.stories.mdx index 616f8a1aa..ada713725 100644 --- a/src/components/text/stories/text.stories.mdx +++ b/src/components/text/stories/text.stories.mdx @@ -175,7 +175,7 @@ export const HeadlineExamples = extraBold => { ## Subheadlines -Subheadlines is reserved for marketing use only. Do not apply it on product pages and in the mobile application. +Subheadlines are reserved for marketing use only. Do not apply it on product pages and in the mobile application. We assumed that a ratio between line height and font size of subheadlines will be always constant and close as much as possible to a value of 1.125. This will provide us with the same proportions of text for each level on the scale. @@ -237,7 +237,7 @@ export const SubheadlineExamples = () => { return sizeVariant; }; -**Font**: Untitled Serif +**Font**: Figtree **Weight**: 400 {SubheadlineExamples()} diff --git a/src/css/config/fontFamily.js b/src/css/config/fontFamily.js index 84ee2e6af..84c8508af 100644 --- a/src/css/config/fontFamily.js +++ b/src/css/config/fontFamily.js @@ -1,6 +1,5 @@ module.exports = { sans: ['Figtree', 'Helvetica', 'Arial', 'sans-serif'], - serif: ['UntitledSerif', 'serif'], mono: [ 'ui-monospace', 'SFMono-Regular', diff --git a/src/sass/_config.scss b/src/sass/_config.scss index 1c8842e6f..5f41b97c5 100644 --- a/src/sass/_config.scss +++ b/src/sass/_config.scss @@ -10,7 +10,6 @@ $shadowLarge: 0 8px 32px 0 rgba($gray-70, 0.2); // Fonts $fontFamilyFigtree: 'Figtree'; -$fontFamilyUntitledSerif: 'UntitledSerif'; $fontFamilyPrimary: $fontFamilyFigtree, 'Helvetica', 'Arial', sans-serif; $fontFeatureSettings: 'ss01' 1; /* enables single-storey 'a' */ $fontWeightNormal: 400; diff --git a/src/sass/_fonts.scss b/src/sass/_fonts.scss index 1e0d68579..276c795ba 100644 --- a/src/sass/_fonts.scss +++ b/src/sass/_fonts.scss @@ -6,8 +6,6 @@ $figtreeBoldWoff2Path: $sgFontsPath + 'Figtree-Bold.woff2'; $figtreeBoldWoffPath: $sgFontsPath + 'Figtree-Bold.woff'; $figtreeBlackWoff2Path: $sgFontsPath + 'Figtree-Black.woff2'; $figtreeBlackWoffPath: $sgFontsPath + 'Figtree-Black.woff'; -$untitledSerifRegularWoff2Path: $sgFontsPath + 'UntitledSerif-Regular.woff2'; -$untitledSerifRegularWoffPath: $sgFontsPath + 'UntitledSerif-Regular.woff'; @if ($includeHtml and $includeFonts) { @font-face { @@ -36,13 +34,4 @@ $untitledSerifRegularWoffPath: $sgFontsPath + 'UntitledSerif-Regular.woff'; font-style: normal; font-display: swap; } - - @font-face { - font-family: $fontFamilyUntitledSerif; - src: url($untitledSerifRegularWoff2Path) format('woff2'), - url($untitledSerifRegularWoffPath) format('woff'); - font-weight: $fontWeightNormal; - font-style: normal; - font-display: swap; - } }