Replace remote styles and fonts with the ones served locally

index.html

@@ -15,15 +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">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
-
   </body>
 </html>

package.json

@@ -73,6 +73,7 @@
     "express-naked-redirect": "^0.1.2",
     "express-static-gzip": "^0.2.2",
     "file-loader": "^1.1.11",
+    "font-awesome": "^4.7.0",
     "json-loader": "^0.5.1",
     "leaflet": "^1.2.0",
     "leaflet-image": "^0.4.0",
@@ -101,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

@@ -10,6 +10,8 @@ import { Provider } from "react-redux";
 import configureStore from "./store";
 import { initialiseGoogleAnalyticsIfRequired } from "./util/googleAnalytics";
 /* S T Y L E S H E E T S */
+import "font-awesome/css/font-awesome.css";
+import "leaflet/dist/leaflet.css";
 import "./css/global.css";
 import "./css/browserCompatability.css";
 import "./css/bootstrapCustomized.css";
@@ -18,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

@@ -117,9 +117,14 @@ const generateConfig = ({extensionPath, devMode=false, customOutputPath, analyze
           use: ["style-loader", "css-loader"]
         },
         {
-          test: /\.(gif|png|jpe?g|svg)$/i,
+          test: /\.(gif|png|jpe?g|svg|woff2?|eot|otf|ttf)$/i,
           use: "file-loader",
-          include: directoriesToTransform
+          include: [
+            ...directoriesToTransform,
+            path.join(__dirname, 'node_modules/font-awesome'),
+            path.join(__dirname, 'node_modules/leaflet'),
+            path.join(__dirname, 'node_modules/typeface-lato')
+          ]
         }
       ]
     }