feat(globalstyles): reduce load times by using Arial instead of Monts…

…errat Previously, Montserrat was used on every foundry-ui component by default. It could be overwritten by another using our globalStyles api, but the font would still be loaded by Google Fonts. This change removes Montserrat and its loading in favor of an OS-default font: Arial. It also looks better and Headstorm doesn't use Montserrat anymore anyway. complete #250
Headstorm · Jul 21, 2021 · 9e7ffff · 9e7ffff
1 parent 62b1f00
commit 9e7ffff
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 9 deletions.
diff --git a/.storybook/headstormTheme.js b/.storybook/headstormTheme.js
@@ -25,7 +25,7 @@ export default create({
   appBorderRadius: 4,
 
   // Typography
-  fontBase: '"Montserrat", "Open Sans", sans-serif',
+  fontBase: '"Arial", "Open Sans", sans-serif',
   fontCode: 'monospace',
 
   // Text colors

diff --git a/src/components/Examples/GlobalStyles.stories.tsx b/src/components/Examples/GlobalStyles.stories.tsx
@@ -16,7 +16,7 @@ const StyledCardContainer = styled(Card.Container)`
   margin-bottom: 1rem;
 `;
 const fontFamilyOptions = {
-  Montserrat: 'Montserrat,Roboto,sans-serif',
+  Arial: 'Arial,Roboto,sans-serif',
   'Times New Roman': '"Times New Roman",Times,serif',
   Monospace: '"Lucida Console",Courier,monospace',
   unset: 'unset',
@@ -25,8 +25,8 @@ const fontFamilyOptions = {
 storiesOf('Global styles', module).add('Example', () => {
   const fontFamily = select(
     'font-family',
-    ['Montserrat', 'Times New Roman', 'Monospace', 'unset'],
-    'Montserrat',
+    ['Arial', 'Times New Roman', 'Monospace', 'unset'],
+    'Arial',
   );
   const primary = color('primary', colorsEnum.primary);
   const grayDark = color('grayDark', colorsEnum.grayDark);

diff --git a/src/components/RangeSlider/__tests__/__snapshots__/RangeSlider.test.tsx.snap b/src/components/RangeSlider/__tests__/__snapshots__/RangeSlider.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`RangeSlider renders 1`] = `
   position: relative;
   height: 1rem;
   width: 100%;
-  font-family: Montserrat,Roboto,sans-serif;
+  font-family: Arial,Roboto,sans-serif;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -92,7 +92,7 @@ exports[`RangeSlider renders 2`] = `
   position: relative;
   height: 1rem;
   width: 100%;
-  font-family: Montserrat,Roboto,sans-serif;
+  font-family: Arial,Roboto,sans-serif;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;

diff --git a/src/context/index.tsx b/src/context/index.tsx
@@ -9,7 +9,6 @@ export const defaultGlobalStyles = `
       ? ''
       : `
           box-sizing: border-box;
-          ${fonts.importFonts}
           ${fonts.body}
         `
   }

diff --git a/src/enums/fonts.ts b/src/enums/fonts.ts
@@ -1,6 +1,5 @@
 enum fonts {
-  importFonts = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;900&display=swap');",
-  body = 'font-family: Montserrat, Roboto, sans-serif;',
+  body = 'font-family: Arial, Roboto, sans-serif;',
 }
 
 export default fonts;
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,6 @@ export const defaultGlobalStyles = ` @@
           ? ''
           : `
               box-sizing: border-box;
-              ${fonts.importFonts}
               ${fonts.body}
             `
       }
@@ Expand Down @@