simplify font stack

Signed-off-by: JD Welch <jdwelch@spotify.com>
2020-03-04 16:08:52 +01:00
parent cfee0f48a7
commit aa03c0c422
2 changed files with 7 additions and 19 deletions
@@ -51,10 +51,6 @@
      href="%PUBLIC_URL%/safari-pinned-tab.svg"
      color="#5bbad5"
    />
-    <link 
-      href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@700&family=Red+Hat+Text:wght@400;700&display=swap"
-      rel="stylesheet"
-    />
    <title>Backstage</title>
  </head>
  <body style="margin: 0">
@@ -27,9 +27,6 @@ export const COLORS = {
  },
 };

-const displayFace = "Red Hat Display";
-const textFace = "Red Hat Text";
-
 const extendedThemeConfig = {
  props: {
    MuiGrid: {
@@ -84,25 +81,27 @@ const extendedThemeConfig = {
    background: '#333333',
  },
  typography: {
-    // This feels bad, but is effective
-    fontFamily: textFace,
+    fontFamily: [
+      '"Helvetica Neue"',
+      'Helvetica',
+      'Roboto',
+      'Arial',
+      'sans-serif',
+    ].join(','),
    h4: {
      // Page name/heading | Dialog titles
-      fontFamily: displayFace,
      fontSize: 48,
      color: '#2D2D2D',
      fontWeight: 700,
    },
    h3: {
      // Page titles
-      fontFamily: displayFace,
      fontSize: 32,
      color: '#2D2D2D',
      fontWeight: 700,
    },
    h2: {
      // Card titles | Sub headings in dialogs
-      fontFamily: displayFace,
      fontSize: 24,
      color: '#2D2D2D',
      fontWeight: 700,
@@ -111,43 +110,36 @@ const extendedThemeConfig = {
    },
    header3: {
      // Table headers (ALL CAPS!)
-      fontFamily: textFace,
      fontSize: 12,
      color: '#9E9E9E',
    },
    menuItem1: {
      // Sidebar menu item
-      fontFamily: displayFace,
      fontSize: 16,
      color: '#828282',
      fontWeight: 700,
    },
    menuItem2: {
      // Dropdown menu items | Form labels | Deep links from cards (Go to...)
-      fontFamily: textFace,
      fontSize: 16,
      color: '#2D2D2D',
    },
    text: {
      // Table entries | Information/error text/messages | General copy/paragraphs
-      fontFamily: textFace,
      fontSize: 13,
      color: '#2D2D2D',
    },
    links: {
      // Table entries | Information/error text/messages | General copy/paragraphs
-      fontFamily: textFace,
      color: '#509BF5',
    },
    tabSelected: {
      // Selected tab
-      fontFamily: textFace,
      fontSize: 18,
      color: '#2D2D2D',
    },
    tabUnselected: {
      // Unselected tab
-      fontFamily: textFace,
      fontSize: 18,
      color: '#9E9E9E',
    },