feat: serve Lato font locally instead of using Google fonts API

index.html

@@ -15,13 +15,5 @@
     <!-- asyncronously load the (entry) react bundle -->
     <script async src="/dist/auspice.bundle.js"></script>
 
-    <!-- by placing this in the body, we mimic async ability
-    This is important as sometimes unpkg takes 10s to return and, if in the header
-    this blocks the page load.
-    https://codepen.io/tigt/post/async-css-without-javascript
-    https://stackoverflow.com/questions/9271276/is-the-recommendation-to-include-css-before-javascript-invalid
-    -->
-    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:100,200,300,400,500,700">
-
   </body>
 </html>

package.json

@@ -102,6 +102,7 @@
     "run-sequence": "~0.3.6",
     "style-loader": "^0.13.2",
     "styled-components": "^4.0.3",
+    "typeface-lato": "^0.0.75",
     "webpack": "^4.30.0",
     "webpack-cli": "^3.1.2",
     "webpack-dev-middleware": "^3.1.3",

src/index.js

@@ -20,6 +20,9 @@ import "./css/notifications.css";
 import "./css/boxed.css";
 import "./css/select.css";
 
+/* FONTS */
+import 'typeface-lato';
+
 const store = configureStore();
 
 /* set up non-redux state storage for the animation - use this conservitavely! */

webpack.config.js

@@ -122,7 +122,8 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
           include: [
             ...directoriesToTransform,
             path.join(__dirname, 'node_modules/font-awesome'),
-            path.join(__dirname, 'node_modules/leaflet')
+            path.join(__dirname, 'node_modules/leaflet'),
+            path.join(__dirname, 'node_modules/typeface-lato')
           ]
         }
       ]