web/satellite: use fontsource for font loading

This change updates the vuetify app and the production app to load
fonts using the fontsource package.

Issue: https://github.com/storj/storj/issues/6200

Change-Id: I4b91a4d0dfcfc42f9f71ac03b31d1ef74c53e15d

web/satellite/package-lock.json

@@ -11,6 +11,7 @@
         "@aws-sdk/client-s3": "3.379.1",
         "@aws-sdk/lib-storage": "3.379.1",
         "@aws-sdk/s3-request-presigner": "3.379.1",
+        "@fontsource-variable/inter": "^5.0.8",
         "@hcaptcha/vue3-hcaptcha": "1.2.1",
         "@mdi/font": "7.0.96",
         "@smithy/signature-v4": "2.0.1",
@@ -1597,6 +1598,11 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.0.8.tgz",
+      "integrity": "sha512-WkYfFNccmEIeL2fNg0mYeLWqOoB7xD8MFxFRc4IwbSP2o8ZaBt36v5aW4by4MyrgGRMNk7uNi5LbvYKq6clPjw=="
+    },
     "node_modules/@hcaptcha/vue3-hcaptcha": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@hcaptcha/vue3-hcaptcha/-/vue3-hcaptcha-1.2.1.tgz",

web/satellite/package.json

@@ -19,9 +19,10 @@
     "@aws-sdk/client-s3": "3.379.1",
     "@aws-sdk/lib-storage": "3.379.1",
     "@aws-sdk/s3-request-presigner": "3.379.1",
-    "@smithy/signature-v4": "2.0.1",
+    "@fontsource-variable/inter": "^5.0.8",
     "@hcaptcha/vue3-hcaptcha": "1.2.1",
     "@mdi/font": "7.0.96",
+    "@smithy/signature-v4": "2.0.1",
     "bip39-english": "2.5.0",
     "chart.js": "4.2.1",
     "pinia": "2.0.23",

web/satellite/src/App.vue

@@ -121,9 +121,7 @@ onBeforeUnmount((): void => {
         font-display: swap;
         src:
             local(''),
-            url('../static/fonts/inter-v3-latin-regular.woff2') format('woff2'),
+            url('@fontsource-variable/inter/files/inter-latin-standard-normal.woff2') format('woff2');
-            url('../static/fonts/inter-v3-latin-regular.woff') format('woff'),
-            url('../static/fonts/inter-v3-latin-regular.ttf') format('truetype');
     }
 
     @font-face {
@@ -133,9 +131,7 @@ onBeforeUnmount((): void => {
         font-display: swap;
         src:
             local(''),
-            url('../static/fonts/inter-v3-latin-600.woff2') format('woff2'),
+            url('@fontsource-variable/inter/files/inter-latin-standard-normal.woff2') format('woff2');
-            url('../static/fonts/inter-v3-latin-600.woff') format('woff'),
-            url('../static/fonts/inter-v3-latin-600.ttf') format('truetype');
     }
 
     @font-face {
@@ -145,9 +141,7 @@ onBeforeUnmount((): void => {
         font-display: swap;
         src:
             local(''),
-            url('../static/fonts/inter-v3-latin-800.woff2') format('woff2'),
+            url('@fontsource-variable/inter/files/inter-latin-standard-normal.woff2') format('woff2');
-            url('../static/fonts/inter-v3-latin-800.woff') format('woff'),
-            url('../static/fonts/inter-v3-latin-800.ttf') format('truetype');
     }
 
     a {

web/satellite/vuetify-poc/src/plugins/index.ts

@@ -13,7 +13,6 @@ import { createPinia, setActivePinia } from 'pinia';
 
 import router from '../router';
 
-import { loadFonts } from './webfontloader';
 import vuetify from './vuetify';
 
 import NotificatorPlugin from '@/utils/plugins/notificator';
@@ -22,7 +21,6 @@ const pinia = createPinia();
 setActivePinia(pinia);
 
 export function registerPlugins(app: App<Element>) {
-    loadFonts();
     app
         .use(vuetify)
         .use(router)

web/satellite/vuetify-poc/src/plugins/vuetify.ts

@@ -9,6 +9,7 @@
 
 import 'vuetify/styles';
 import '@mdi/font/css/materialdesignicons.css';
+import '@fontsource-variable/inter';
 import { createVuetify } from 'vuetify';
 import { md3 } from 'vuetify/blueprints';
 

web/satellite/vuetify-poc/src/plugins/webfontloader.ts

@@ -1,18 +0,0 @@
-// Copyright (C) 2023 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-/**
- * plugins/webfontloader.ts
- *
- * webfontloader documentation: https://github.com/typekit/webfontloader
- */
-
-export async function loadFonts () {
-    const webFontLoader = await import(/* webpackChunkName: "webfontloader" */'webfontloader');
-
-    webFontLoader.load({
-        google: {
-            families: ['Inter:400,500,700&display=swap'],
-        },
-    });
-}

web/satellite/vuetify-poc/src/styles/settings.scss

@@ -1,7 +1,7 @@
 // Copyright (C) 2023 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-$font-family: 'Inter', sans-serif;
+$font-family: 'Inter Variable', sans-serif;
 
 @use 'vuetify/settings' with (
   $color-pack: false,