Self-host Rubik font

frontend/package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fontsource/rubik": "^4.5.0",
     "@mdi/font": "^5.9.55",
     "apexcharts": "^3.25.0",
     "core-js": "^3.6.5",

frontend/public/index.html

@@ -6,7 +6,6 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik:100,300,400,500,700,900">
   </head>
   <body>
     <noscript>

frontend/src/styles/global.scss

@@ -1,3 +1,16 @@
+// Rubik Font
+
+@import "~@fontsource/rubik/300.css";
+@import "~@fontsource/rubik/300-italic.css";
+@import "~@fontsource/rubik/400.css";
+@import "~@fontsource/rubik/400-italic.css";
+@import "~@fontsource/rubik/500.css";
+@import "~@fontsource/rubik/500-italic.css";
+@import "~@fontsource/rubik/700.css";
+@import "~@fontsource/rubik/700-italic.css";
+
+// Global styles
+
 .m-label {
     display: block;
     margin-bottom: 4px;

frontend/src/styles/variables.scss

@@ -1,2 +1,4 @@
-// Globals
-$body-font-family: 'Rubik', serif;
+// Vuetify variables
+// see: ../node_modules/vuetify/src/styles/settings/_variables.scss
+
+$body-font-family: "Rubik", sans-serif;

frontend/yarn.lock

@@ -911,6 +911,11 @@
     "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
+"@fontsource/rubik@^4.5.0":
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/rubik/-/rubik-4.5.0.tgz#e6e86606903d7102c565eec4b1339298308c3acb"
+  integrity sha512-evvN6wFvc4gH9X3PuRkAfaWXJya5jcZxbMpAsiQIfq8KUCSBx74Rknm5M6hpRuB9AdxdchF/A3p18VkR9RZy2g==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"