ui: Use OpenSans font (#178)

CHANGELOG.md

@@ -4,6 +4,13 @@ Change Log
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+
+### Changed
+- The UI now includes the Open Sans webfont instead of relying on browser/OS
+  fonts
+
+
 ## [v3.0.0-beta3]
 
 ### Added

ui/package-lock.json

@@ -5192,6 +5192,11 @@
         "wrappy": "1"
       }
     },
+    "opensans-npm-webfont": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/opensans-npm-webfont/-/opensans-npm-webfont-1.0.0.tgz",
+      "integrity": "sha512-2ehgrX+NpoxLOil30tYGr0cDsDXSJn9gon6PfM1Ki0CxZF6ui9Mi6Dm5DGglKyK2QiX0gMb6Ch7VmRHwfc4M6Q=="
+    },
     "opn": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz",

ui/package.json

@@ -10,7 +10,9 @@
     "dev": "webpack-dev-server --mode development --port 3000 --hot --watch",
     "errors": "webpack --mode development --display-error-details"
   },
-  "dependencies": {},
+  "dependencies": {
+    "opensans-npm-webfont": "^1.0.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.11.4",
     "@babel/preset-env": "^7.11.0",

ui/src/index.js

@@ -3,6 +3,7 @@ import './mailbox.css'
 import './navbar.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import '@webcomponents/webcomponentsjs/webcomponents-bundle'
+import 'opensans-npm-webfont'
 import { Elm } from './Main.elm'
 import './monitorMessages'
 import './renderedHtml'

ui/src/main.css

@@ -46,8 +46,9 @@ body {
 }
 
 body, button, input, table {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Open Sans", Helvetica, Arial, sans-serif;
   font-size: 14px;
+  font-weight: 400;
   line-height: 1.43;
   color: var(--primary-color);
 }
@@ -245,7 +246,7 @@ h3 {
   font-weight: 400;
   height: 30px;
   margin: 0;
-  padding: 5px 10px;
+  padding: 5px 10px 6px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);

ui/src/navbar.css

@@ -25,6 +25,7 @@
 
 .navbar-brand {
   font-size: 18px;
+  font-weight: 600;
 }
 
 .navbar-toggle {

ui/webpack.config.js

@@ -35,12 +35,10 @@ module.exports = (env, argv) => {
           ],
         },
         {
-          include: [/\/src/, /\/node_modules\/@fortawesome\/fontawesome-free\/css/],
           test: /\.css$/,
           loader: ['style-loader', 'css-loader'],
         },
         {
-          include: [/\/node_modules\/@fortawesome\/fontawesome-free\/webfonts/],
           test: /\.(eot|svg|ttf|woff|woff2)$/,
           loader: 'file-loader',
           options: {