Include Roboto font in build

src/dashboard/_misc/common.css

@@ -8,4 +8,4 @@ otherwise it looks odd in the NodeCG dashboard panels. */
 in the NodeCG dashboard panels anyway. */
 .v-application--wrap {
   min-height: 0 !important;
-}
+}

src/dashboard/_misc/fonts/roboto.css

@@ -0,0 +1,78 @@
+/* roboto-100 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: url('./roboto-v20-latin-100.eot'); /* IE9 Compat Modes */
+  src: local('Roboto Thin'), local('Roboto-Thin'),
+       url('./roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./roboto-v20-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
+       url('./roboto-v20-latin-100.woff') format('woff'), /* Modern Browsers */
+       url('./roboto-v20-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('./roboto-v20-latin-100.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+/* roboto-300 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url('./roboto-v20-latin-300.eot'); /* IE9 Compat Modes */
+  src: local('Roboto Light'), local('Roboto-Light'),
+       url('./roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./roboto-v20-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+       url('./roboto-v20-latin-300.woff') format('woff'), /* Modern Browsers */
+       url('./roboto-v20-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('./roboto-v20-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+/* roboto-regular - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url('./roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Roboto'), local('Roboto-Regular'),
+       url('./roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('./roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('./roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('./roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+/* roboto-500 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: url('./roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
+  src: local('Roboto Medium'), local('Roboto-Medium'),
+       url('./roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+       url('./roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */
+       url('./roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('./roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+/* roboto-700 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: url('./roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
+  src: local('Roboto Bold'), local('Roboto-Bold'),
+       url('./roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+       url('./roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */
+       url('./roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('./roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
+}
+/* roboto-900 - latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: url('./roboto-v20-latin-900.eot'); /* IE9 Compat Modes */
+  src: local('Roboto Black'), local('Roboto-Black'),
+       url('./roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('./roboto-v20-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
+       url('./roboto-v20-latin-900.woff') format('woff'), /* Modern Browsers */
+       url('./roboto-v20-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('./roboto-v20-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
+}

src/dashboard/_misc/vuetify.ts

@@ -2,6 +2,7 @@ import '@mdi/font/css/materialdesignicons.css';
 import Vue from 'vue';
 import Vuetify from 'vuetify/lib';
 import './common.css';
+import './fonts/roboto.css';
 
 Vue.use(Vuetify);
 

src/dashboard/template.html

@@ -4,7 +4,6 @@
 <head>
   <meta charset="utf-8">
   <title><%= htmlWebpackPlugin.options.title %></title>
-  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
 </head>
 
 <body>

webpack.config.js

@@ -104,14 +104,14 @@ module.exports = {
         ],
       },
       {
-        test: /\.(woff(2)?|ttf|eot)$/,
+        test: /\.(woff(2)?|ttf|eot|svg)$/,
         loader: 'file-loader',
         options: {
           name: 'font/[name].[ext]',
         },
       },
       {
-        test: /\.(png|svg)?$/,
+        test: /\.(png)?$/,
         loader: 'file-loader',
         options: {
           name: 'img/[name].[ext]',