Added fonts locally and configured them with webpack

fonts.d.ts

@@ -0,0 +1,2 @@
+declare module '*.woff'
+declare module '*.woff2'

public/index.html

@@ -28,9 +28,6 @@
     You need to enable JavaScript to run this app.
   </noscript>
   <div id="root" style="max-width: 100vw; min-height: 100vh;"> </div>
-
 </body>
-<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway:300,400,500,600,800" rel="stylesheet" media="none" onload="this.media='all'">
-
 
 </html>

src/styles/_base.scss

@@ -5,6 +5,7 @@ This file acts as a bundler for all variables/mixins/themes, so they
 can easily be swapped out without `core.scss` ever having to know.
 */
 
+@import "./base/fonts";
 @import "./base/vars";
 @import "./base/typography";
 @import "./base/overrides";

src/styles/base/_fonts.scss

@@ -0,0 +1,67 @@
+/* open-sans-regular - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Open Sans Regular"), local("OpenSans-Regular"),
+    url("./fonts/open-sans/open-sans-v15-latin-regular.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./fonts/open-sans/open-sans-v15-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* raleway-300 - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Raleway";
+  font-style: normal;
+  font-weight: 300;
+  src: local("Raleway Light"), local("Raleway-Light"),
+    url("./fonts/raleway/raleway-v12-latin-300.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./fonts/raleway/raleway-v12-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* raleway-regular - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Raleway";
+  font-style: normal;
+  font-weight: 400;
+  src: local("Raleway"), local("Raleway-Regular"),
+    url("./fonts/raleway/raleway-v12-latin-regular.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./fonts/raleway/raleway-v12-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* raleway-500 - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Raleway";
+  font-style: normal;
+  font-weight: 500;
+  src: local("Raleway Medium"), local("Raleway-Medium"),
+    url("./fonts/raleway/raleway-v12-latin-500.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./fonts/raleway/raleway-v12-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* raleway-600 - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Raleway";
+  font-style: normal;
+  font-weight: 600;
+  src: local("Raleway SemiBold"), local("Raleway-SemiBold"),
+    url("./fonts/raleway/raleway-v12-latin-600.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./fonts/raleway/raleway-v12-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+/* raleway-800 - latin */
+@font-face {
+  font-display: swap;
+  font-family: "Raleway";
+  font-style: normal;
+  font-weight: 800;
+  src: local("Raleway ExtraBold"), local("Raleway-ExtraBold"),
+    url("./fonts/raleway/raleway-v12-latin-800.woff2") format("woff2"),
+    /* Chrome 26+, Opera 23+, Firefox 39+ */
+      url("./fonts/raleway/raleway-v12-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}

src/styles/base/_vars.scss

@@ -14,7 +14,7 @@ $color-gravel-approx: #dadada;
 $color-cape-cod-approx: #dadada;
 $color-tuatara-approx: #dadada;
 // Fonts
-$font-0: Raleway, sans-serif;
+$font-0: "Raleway", sans-serif;
 $font-1: "Open Sans", sans-serif;
 // Colors
 $main-white: #fafafa;