diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 8ae478eec1..b22b0cc52b 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,29 +1,29 @@ - + \ No newline at end of file diff --git a/.storybook/public/fonts/Figtree-Black.woff b/.storybook/public/fonts/Figtree-Black.woff new file mode 100644 index 0000000000..4921e92bf2 Binary files /dev/null and b/.storybook/public/fonts/Figtree-Black.woff differ diff --git a/.storybook/public/fonts/Figtree-Black.woff2 b/.storybook/public/fonts/Figtree-Black.woff2 new file mode 100644 index 0000000000..d726d57c03 Binary files /dev/null and b/.storybook/public/fonts/Figtree-Black.woff2 differ diff --git a/.storybook/public/fonts/Figtree-Bold.woff b/.storybook/public/fonts/Figtree-Bold.woff new file mode 100644 index 0000000000..32b589b497 Binary files /dev/null and b/.storybook/public/fonts/Figtree-Bold.woff differ diff --git a/.storybook/public/fonts/Figtree-Bold.woff2 b/.storybook/public/fonts/Figtree-Bold.woff2 new file mode 100644 index 0000000000..380beda221 Binary files /dev/null and b/.storybook/public/fonts/Figtree-Bold.woff2 differ diff --git a/.storybook/public/fonts/Figtree-Regular.woff b/.storybook/public/fonts/Figtree-Regular.woff new file mode 100644 index 0000000000..a781ec6881 Binary files /dev/null and b/.storybook/public/fonts/Figtree-Regular.woff differ diff --git a/.storybook/public/fonts/Figtree-Regular.woff2 b/.storybook/public/fonts/Figtree-Regular.woff2 new file mode 100644 index 0000000000..785d59a543 Binary files /dev/null and b/.storybook/public/fonts/Figtree-Regular.woff2 differ diff --git a/.storybook/theme.js b/.storybook/theme.js index f37dec5b6b..93d1dc227c 100644 --- a/.storybook/theme.js +++ b/.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', diff --git a/src/components/buttons/_buttons.scss b/src/components/buttons/_buttons.scss index 498a93e90d..79c51d4be1 100644 --- a/src/components/buttons/_buttons.scss +++ b/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 { diff --git a/src/components/text/stories/text.stories.mdx b/src/components/text/stories/text.stories.mdx index 3c859bb31a..616f8a1aa2 100644 --- a/src/components/text/stories/text.stories.mdx +++ b/src/components/text/stories/text.stories.mdx @@ -30,9 +30,7 @@ export const getValues = function (object, addUndefined = true) { Typography -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 {TextBitExamples(true)} @@ -165,12 +163,12 @@ export const HeadlineExamples = extraBold => { return sizeVariant; }; -**Font**: Proxima Nova +**Font**: Figtree **Weight**: 900 {HeadlineExamples(true)} -**Font**: Proxima Nova +**Font**: Figtree **Weight**: 700 {HeadlineExamples(false)} @@ -316,12 +314,12 @@ export const TextExamples = weight => { return sizeVariant; }; -**Font**: Proxima Nova +**Font**: Figtree **Weight**: 700 {TextExamples(TEXT_WEIGHT.BOLD)} -**Font**: Proxima Nova +**Font**: Figtree **Weight**: 400 {TextExamples(TEXT_WEIGHT.NORMAL)} diff --git a/src/css/config/fontFamily.js b/src/css/config/fontFamily.js index 75bfaba87c..84ee2e6afc 100644 --- a/src/css/config/fontFamily.js +++ b/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', diff --git a/src/docs/styles.scss b/src/docs/styles.scss index e93ba86957..35b0226c26 100644 --- a/src/docs/styles.scss +++ b/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; diff --git a/src/fonts/Figtree-Black.woff b/src/fonts/Figtree-Black.woff new file mode 100644 index 0000000000..4921e92bf2 Binary files /dev/null and b/src/fonts/Figtree-Black.woff differ diff --git a/src/fonts/Figtree-Black.woff2 b/src/fonts/Figtree-Black.woff2 new file mode 100644 index 0000000000..d726d57c03 Binary files /dev/null and b/src/fonts/Figtree-Black.woff2 differ diff --git a/src/fonts/Figtree-Bold.woff b/src/fonts/Figtree-Bold.woff new file mode 100644 index 0000000000..32b589b497 Binary files /dev/null and b/src/fonts/Figtree-Bold.woff differ diff --git a/src/fonts/Figtree-Bold.woff2 b/src/fonts/Figtree-Bold.woff2 new file mode 100644 index 0000000000..380beda221 Binary files /dev/null and b/src/fonts/Figtree-Bold.woff2 differ diff --git a/src/fonts/Figtree-Regular.woff b/src/fonts/Figtree-Regular.woff new file mode 100644 index 0000000000..a781ec6881 Binary files /dev/null and b/src/fonts/Figtree-Regular.woff differ diff --git a/src/fonts/Figtree-Regular.woff2 b/src/fonts/Figtree-Regular.woff2 new file mode 100644 index 0000000000..785d59a543 Binary files /dev/null and b/src/fonts/Figtree-Regular.woff2 differ diff --git a/src/sass/_config.scss b/src/sass/_config.scss index e8cd431021..c97e2ae1b1 100644 --- a/src/sass/_config.scss +++ b/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; diff --git a/src/sass/_fonts.scss b/src/sass/_fonts.scss index 64bef20956..1e0d685793 100644 --- a/src/sass/_fonts.scss +++ b/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;