refactor: fonts are now bundled with packages (#3227)

packages/hoppscotch-sh-admin/assets/scss/themes.scss

@@ -1,7 +1,7 @@
 @mixin base-theme {
-  --font-sans: 'Inter', sans-serif;
-  --font-mono: 'Roboto Mono', monospace;
-  --font-icon: 'Material Icons';
+  --font-sans: "Inter Variable", sans-serif;
+  --font-icon: "Material Symbols Rounded Variable";
+  --font-mono: "Roboto Mono Variable", monospace;
   --font-size-tiny: calc(var(--font-size-body) - 0.062rem);
 }
 

packages/hoppscotch-sh-admin/package.json

@@ -13,6 +13,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@graphql-typed-document-node/core": "^3.1.1",
     "@hoppscotch/ui": "workspace:^",
     "@hoppscotch/vue-toasted": "^0.1.0",
@@ -56,6 +59,7 @@
     "sass": "^1.57.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.3",
+    "unplugin-fonts": "^1.0.3",
     "vite": "^3.1.4",
     "vite-plugin-pages": "^0.26.0",
     "vite-plugin-vue-layouts": "^0.7.0",

packages/hoppscotch-sh-admin/src/main.ts

@@ -7,6 +7,9 @@ import 'virtual:windi.css';
 import '@hoppscotch/ui/style.css';
 import '../assets/scss/themes.scss';
 import '../assets/scss/styles.scss';
+import '@fontsource-variable/inter';
+import '@fontsource-variable/material-symbols-rounded';
+import '@fontsource-variable/roboto-mono';
 // END STYLES
 
 import { HOPP_MODULES } from './modules';

packages/hoppscotch-sh-admin/tsconfig.json

@@ -25,6 +25,7 @@
     "types": [
       "vite/client",
       "unplugin-icons/types/vue",
+      "unplugin-fonts/client",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client"
     ]

packages/hoppscotch-sh-admin/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { FileSystemIconLoader } from 'unplugin-icons/loaders';
 import Icons from 'unplugin-icons/vite';
+import Unfonts from "unplugin-fonts/vite";
 import IconResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
 import WindiCSS from 'vite-plugin-windicss';
@@ -68,5 +69,23 @@ export default defineConfig({
         auth: FileSystemIconLoader('../hoppscotch-sh-admin/assets/icons/auth'),
       },
     }),
+    Unfonts({
+      fontsource: {
+        families: [
+          {
+            name: "Inter Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Material Symbols Rounded Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Roboto Mono Variable",
+            variables: ["variable-full"],
+          },
+        ],
+      },
+    }),
   ],
 });