Add Noto Sans and Mono as default font for full Unicode support

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 
 public/*.js
 public/*.map
+public/assets/

src/assets/fonts/fonts.scss

@@ -0,0 +1,59 @@
+@font-face {
+    font-family: 'Noto Sans';
+    src: url('./Noto/NotoSans-Regular.eot');
+    src: url('./Noto/NotoSans-Regular.eot?#iefix') format('embedded-opentype'),
+    url('./Noto/NotoSans-Regular.woff2') format('woff2'),
+    url('./Noto/NotoSans-Regular.woff') format('woff'),
+    url('./Noto/NotoSans-Regular.ttf') format('truetype'),
+    url('./Noto/NotoSans-Regular.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Noto Sans';
+    src: url('./Noto/NotoSans-Bold.eot');
+    src: url('./Noto/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
+    url('./Noto/NotoSans-Bold.woff2') format('woff2'),
+    url('./Noto/NotoSans-Bold.woff') format('woff'),
+    url('./Noto/NotoSans-Bold.ttf') format('truetype'),
+    url('./Noto/NotoSans-Bold.otf') format('opentype');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Noto Sans';
+    src: url('./Noto/NotoSans-BoldItalic.eot');
+    src: url('./Noto/NotoSans-BoldItalic.eot?#iefix') format('embedded-opentype'),
+    url('./Noto/NotoSans-BoldItalic.woff2') format('woff2'),
+    url('./Noto/NotoSans-BoldItalic.woff') format('woff'),
+    url('./Noto/NotoSans-BoldItalic.ttf') format('truetype'),
+    url('./Noto/NotoSans-BoldItalic.otf') format('opentype');
+    font-weight: bold;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Noto Sans';
+    src: url('./Noto/NotoSans-Italic.eot');
+    src: url('./Noto/NotoSans-Italic.eot?#iefix') format('embedded-opentype'),
+    url('./Noto/NotoSans-Italic.woff2') format('woff2'),
+    url('./Noto/NotoSans-Italic.woff') format('woff'),
+    url('./Noto/NotoSans-Italic.ttf') format('truetype'),
+    url('./Noto/NotoSans-Italic.otf') format('opentype');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Noto Mono';
+    src: url('./Noto/NotoMono-Regular.eot');
+    src: url('./Noto/NotoMono-Regular.eot?#iefix') format('embedded-opentype'),
+    url('./Noto/NotoMono-Regular.woff2') format('woff2'),
+    url('./Noto/NotoMono-Regular.woff') format('woff'),
+    url('./Noto/NotoMono-Regular.ttf') format('truetype'),
+    url('./Noto/NotoMono-Regular.otf') format('opentype');
+    font-weight: normal;
+    font-style: normal;
+}

src/index.jsx

@@ -1,3 +1,4 @@
+import './assets/fonts/fonts.scss';
 import './sass/main.scss';
 
 import Inferno from 'inferno';

src/sass/_variables.scss

@@ -26,8 +26,8 @@ $purple:       hsl(271, 100%, 71%);
 $red:          hsl(348, 100%, 61%);
 
 // Typography
-$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
-$family-monospace: monospace;
+$family-sans-serif: "Noto Sans", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$family-monospace: "Noto Mono", monospace;
 
 $size-1: 3rem;
 $size-2: 2.5rem;

webpack.config.js

@@ -53,6 +53,62 @@ const webpackConfig = {
           }
         ]
       }
+    , {
+        test: (/\.woff$/)
+      , exclude: (/node_modules/)
+      , use: [
+          {
+            loader: 'url-loader'
+          , options: {
+              limit: 65000
+            , mimetype: 'application/font-woff'
+            , name: './assets/fonts/[name].[ext]'
+            }
+          }
+        ]
+      }
+    , {
+        test: (/\.woff2$/)
+      , exclude: (/node_modules/)
+      , use: [
+          {
+            loader: 'url-loader'
+          , options: {
+              limit: 65000
+            , mimetype: 'application/font-woff2'
+            , name: './assets/fonts/[name].[ext]'
+            }
+          }
+        ]
+      }
+    , {
+        test: (/\.[ot]tf$/)
+      , exclude: (/node_modules/)
+      , use: [
+          {
+            loader: 'url-loader'
+          , options: {
+              limit: 65000
+            , mimetype: 'application/octet-stream'
+            , name: './assets/fonts/[name].[ext]'
+            }
+          }
+        ]
+      }
+    , {
+        test: (/\.eot$/)
+      , exclude: (/node_modules/)
+      , use: [
+          {
+            loader: 'url-loader'
+          , options: {
+              limit: 65000
+            , mimetype: 'application/vnd.ms-fontobject'
+            , name: './assets/fonts/[name].[ext]'
+            }
+          }
+        ]
+      }
     ]
   }
 , resolve: {