Roboto is now correctly included. -apple-system added as a fallback font.

26cb6c6f · Andrew Hrdy · 1ca09c91 · 26cb6c6f · 26cb6c6f · 26cb6c6f
Commit 26cb6c6f authored Jan 14, 2018 by Andrew Hrdy
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -24,9 +24,10 @@
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.2",
    "react-router-redux": "^5.0.0-alpha.9",
+    "react-scripts": "1.0.10",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
-    "react-scripts": "1.0.10"
+    "typeface-roboto": "0.0.50"
  },
  "devDependencies": {
    "babel-eslint": "^7.2.3",

--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,6 @@

        <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
-        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.40.1/mapbox-gl.css' rel='stylesheet'/>
    </head>
    <body>

--- a/src/index.js
+++ b/src/index.js
@@ -12,6 +12,7 @@ import reducers from './reducers/index';
 import {MuiThemeProvider} from 'material-ui/styles';
 import theme from './theme';
 import './styles/build/whatsOpen.css';
+import 'typeface-roboto';

 // Create a history of your choosing (we're using a browser history in this case)
 const history = createHistory();

--- a/src/theme.js
+++ b/src/theme.js
@@ -172,7 +172,7 @@ const theme = createMuiTheme({
        }
    },
    typography: {
-        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
        fontSize: 14,
        fontWeightLight: 300,
        fontWeightRegular: 400,
@@ -180,7 +180,7 @@ const theme = createMuiTheme({
        display4: {
            fontSize: 112,
            fontWeight: 300,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            letterSpacing: '-.04em',
            lineHeight: 1,
            color: 'rgba(0, 0, 0, 0.54)'
@@ -188,7 +188,7 @@ const theme = createMuiTheme({
        display3: {
            fontSize: 56,
            fontWeight: 400,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            letterSpacing: '-.02em',
            lineHeight: 1.35,
            color: 'rgba(0, 0, 0, 0.54)'
@@ -196,56 +196,56 @@ const theme = createMuiTheme({
        display2: {
            fontSize: 45,
            fontWeight: 400,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            lineHeight: '48px',
            color: 'rgba(0, 0, 0, 0.54)'
        },
        display1: {
            fontSize: 34,
            fontWeight: 400,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            lineHeight: '40px',
            color: 'rgba(0, 0, 0, 0.54)'
        },
        headline: {
            fontSize: 24,
            fontWeight: 400,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            lineHeight: '32px',
            color: 'rgba(0, 0, 0, 0.87)'
        },
        title: {
            fontSize: 21,
            fontWeight: 500,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            lineHeight: 1,
            color: 'rgba(0, 0, 0, 0.87)'
        },
        subheading: {
            fontSize: 16,
            fontWeight: 400,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            lineHeight: '24px',
            color: 'rgba(0, 0, 0, 0.87)'
        },
        body2: {
            fontSize: 14,
            fontWeight: 500,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            lineHeight: '24px',
            color: 'rgba(0, 0, 0, 0.87)'
        },
        body1: {
            fontSize: 14,
            fontWeight: 400,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            lineHeight: '20px',
            color: 'rgba(0, 0, 0, 0.87)'
        },
        caption: {
            fontSize: 12,
            fontWeight: 400,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif',
            lineHeight: 1,
            color: 'rgba(0, 0, 0, 0.54)'
        },
@@ -253,7 +253,7 @@ const theme = createMuiTheme({
            fontSize: 14,
            textTransform: 'uppercase',
            fontWeight: 500,
-            fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
+            fontFamily: '"Roboto", "-apple-system", "Helvetica", "Arial", sans-serif'
        }
    },
    mixins: {