feat: Remove UntitledSerif font usage (#2851)

* Remove Untitled serif usage

* Undo storybook command modification

Author: mateusz-zaboj

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;

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
 
 <Typeset>{SubheadlineExamples()}</Typeset>

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

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;

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;
-  }
 }