feat: Replace ProximaNova with Figtree font family

.storybook/manager-head.html

@@ -1,29 +1,29 @@
 <style>
   @font-face {
-    font-family: 'ProximaNova';
-    src: url(fonts/ProximaNova-Regular.woff2) format('woff2'),
-      url(fonts/ProximaNova-Regular.woff) format('woff');
+    font-family: 'Figtree';
+    src: url(fonts/Figtree-Regular.woff2) format('woff2'),
+      url(fonts/Figtree-Regular.woff) format('woff');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-    font-family: 'ProximaNova';
-    src: url(fonts/ProximaNova-Bold.woff2) format('woff2'),
-      url(fonts/ProximaNova-Bold.woff) format('woff');
+    font-family: 'Figtree';
+    src: url(fonts/Figtree-Bold.woff2) format('woff2'),
+      url(fonts/Figtree-Bold.woff) format('woff');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-    font-family: 'ProximaNova';
-    src: url(fonts/ProximaNova-Black.woff2) format('woff2'),
-      url(fonts/ProximaNova-Black.woff) format('woff');
+    font-family: 'Figtree';
+    src: url(fonts/Figtree-Black.woff2) format('woff2'),
+      url(fonts/Figtree-Black.woff) format('woff');
     font-weight: 900;
     font-style: normal;
     font-display: swap;
   }
 </style>
-<link rel="stylesheet" href="manager.css" />
+<link rel="stylesheet" href="manager.css" />

.storybook/theme.js

@@ -7,7 +7,7 @@ export default create({
   colorSecondary: '#000000',
 
   // Typography
-  fontBase: '"ProximaNova", "Helvetica", "Arial", sans-serif',
+  fontBase: '"Figtree", "Helvetica", "Arial", sans-serif',
   fontCode: 'monospace',
   fontSize: '16px',
 

src/components/buttons/_buttons.scss

@@ -122,12 +122,6 @@ $largeButtonSize: componentSize(l);
     .sg-button__hover-overlay {
       border-radius: var(--border-radius-m);
     }
-
-    // Proxima is broken
-    // Added to align text in the center for this font-size
-    .sg-button__text {
-      top: 1px;
-    }
   }
 
   &--reversed-order {

src/components/text/stories/text.stories.mdx

@@ -30,9 +30,7 @@ export const getValues = function (object, addUndefined = true) {
 
 <PageHeader type="foundation">Typography</PageHeader>
 
-The Brainly brand typeface is Proxima Nova, a geometric sans serif that works equally well with large headlines and functional copy. Use this typeface according to the following rules for consistency across the brand.
-
-Proxima Nova combines modern proportions with a geometric appearance and has become one of the most popular web fonts, in use on thousands of websites around the world.
+The Brainly brand typeface is Figtree, a geometric sans serif that works equally well with large headlines and functional copy. Use this typeface according to the following rules for consistency across the brand.
 
 Our typography system is a balanced hierarchy of text styles used throughout Brainly.
 This helps users quickly find information by emphasizing important parts and enhancing legibility overall.
@@ -87,7 +85,7 @@ export const TextBitExamples = extraBold => {
   return sizesVariants;
 };
 
-**Font**: Proxima Nova
+**Font**: Figtree
 **Weight**: 900
 
 <Typeset>{TextBitExamples(true)}</Typeset>
@@ -165,12 +163,12 @@ export const HeadlineExamples = extraBold => {
   return sizeVariant;
 };
 
-**Font**: Proxima Nova
+**Font**: Figtree
 **Weight**: 900
 
 <Typeset>{HeadlineExamples(true)}</Typeset>
 
-**Font**: Proxima Nova
+**Font**: Figtree
 **Weight**: 700
 
 <Typeset>{HeadlineExamples(false)}</Typeset>
@@ -316,12 +314,12 @@ export const TextExamples = weight => {
   return sizeVariant;
 };
 
-**Font**: Proxima Nova
+**Font**: Figtree
 **Weight**: 700
 
 <Typeset>{TextExamples(TEXT_WEIGHT.BOLD)}</Typeset>
 
-**Font**: Proxima Nova
+**Font**: Figtree
 **Weight**: 400
 
 <Typeset>{TextExamples(TEXT_WEIGHT.NORMAL)}</Typeset>

src/css/config/fontFamily.js

@@ -1,5 +1,5 @@
 module.exports = {
-  sans: ['ProximaNova', 'Helvetica', 'Arial', 'sans-serif'],
+  sans: ['Figtree', 'Helvetica', 'Arial', 'sans-serif'],
   serif: ['UntitledSerif', 'serif'],
   mono: [
     'ui-monospace',

src/docs/styles.scss

@@ -77,7 +77,7 @@
 .sbdocs.sbdocs-p {
   font-size: 18px;
   line-height: 28px;
-  font-family: 'ProximaNova', 'Helvetica', 'Arial', sans-serif;
+  font-family: 'Figtree', 'Helvetica', 'Arial', sans-serif;
   font-weight: 400;
   color: #000000;
 

src/sass/_config.scss

@@ -9,9 +9,9 @@ $shadowMedium: 0 4px 16px 0 rgba($gray-70, 0.2);
 $shadowLarge: 0 8px 32px 0 rgba($gray-70, 0.2);
 
 // Fonts
-$fontFamilyProximaNova: 'ProximaNova';
+$fontFamilyFigtree: 'Figtree';
 $fontFamilyUntitledSerif: 'UntitledSerif';
-$fontFamilyPrimary: $fontFamilyProximaNova, 'Helvetica', 'Arial', sans-serif;
+$fontFamilyPrimary: $fontFamilyFigtree, 'Helvetica', 'Arial', sans-serif;
 $fontWeightNormal: 400;
 $fontWeightBold: 700;
 $fontWeightBlack: 900;

src/sass/_fonts.scss

@@ -1,37 +1,37 @@
 $includeHtml: false !default;
 $includeFonts: true !default;
-$proximaNovaRegularWoff2Path: $sgFontsPath + 'ProximaNova-Regular.woff2';
-$proximaNovaRegularWoffPath: $sgFontsPath + 'ProximaNova-Regular.woff';
-$proximaNovaBoldWoff2Path: $sgFontsPath + 'ProximaNova-Bold.woff2';
-$proximaNovaBoldWoffPath: $sgFontsPath + 'ProximaNova-Bold.woff';
-$proximaNovaBlackWoff2Path: $sgFontsPath + 'ProximaNova-Black.woff2';
-$proximaNovaBlackWoffPath: $sgFontsPath + 'ProximaNova-Black.woff';
+$figtreeRegularWoff2Path: $sgFontsPath + 'Figtree-Regular.woff2';
+$figtreeRegularWoffPath: $sgFontsPath + 'Figtree-Regular.woff';
+$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 {
-    font-family: $fontFamilyProximaNova;
-    src: url($proximaNovaRegularWoff2Path) format('woff2'),
-      url($proximaNovaRegularWoffPath) format('woff');
+    font-family: $fontFamilyFigtree;
+    src: url($figtreeRegularWoff2Path) format('woff2'),
+      url($figtreeRegularWoffPath) format('woff');
     font-weight: $fontWeightNormal;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-    font-family: $fontFamilyProximaNova;
-    src: url($proximaNovaBoldWoff2Path) format('woff2'),
-      url($proximaNovaBoldWoffPath) format('woff');
+    font-family: $fontFamilyFigtree;
+    src: url($figtreeBoldWoff2Path) format('woff2'),
+      url($figtreeBoldWoffPath) format('woff');
     font-weight: $fontWeightBold;
     font-style: normal;
     font-display: swap;
   }
 
   @font-face {
-    font-family: $fontFamilyProximaNova;
-    src: url($proximaNovaBlackWoff2Path) format('woff2'),
-      url($proximaNovaBlackWoffPath) format('woff');
+    font-family: $fontFamilyFigtree;
+    src: url($figtreeBlackWoff2Path) format('woff2'),
+      url($figtreeBlackWoffPath) format('woff');
     font-weight: $fontWeightBlack;
     font-style: normal;
     font-display: swap;