diff --git a/frontend/package.json b/frontend/package.json
index 090e3cca7..ada67c08d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,8 @@
     "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",
     "js-cookie": "^2.2.1",
diff --git a/frontend/public/index.html b/frontend/public/index.html
index ca149dba4..412352865 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -6,8 +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">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>
   <body>
     <noscript>
diff --git a/frontend/src/plugins/vuetify.js b/frontend/src/plugins/vuetify.js
index 406f9b7fa..c8df96438 100644
--- a/frontend/src/plugins/vuetify.js
+++ b/frontend/src/plugins/vuetify.js
@@ -1,3 +1,4 @@
+import '@mdi/font/css/materialdesignicons.css'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
 
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index 4127ef24f..67d87bb78 100644
--- a/frontend/src/styles/global.scss
+++ b/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;
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index 36d921938..056f6cbb3 100644
--- a/frontend/src/styles/variables.scss
+++ b/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;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 389527d91..4b890fbfb 100644
--- a/frontend/yarn.lock
+++ b/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"
@@ -952,6 +957,11 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@mdi/font@^5.9.55":
+  version "5.9.55"
+  resolved "https://registry.yarnpkg.com/@mdi/font/-/font-5.9.55.tgz#41acd50b88073ded7095fc3029d8712b6e12f38e"
+  integrity sha512-jswRF6q3eq8NWpWiqct6q+6Fg/I7nUhrxYJfiEM8JJpap0wVJLQdbKtyS65GdlK7S7Ytnx3TTi/bmw+tBhkGmg==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"