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

packages/hoppscotch-selfhost-web/package.json

@@ -23,6 +23,9 @@
     "postinstall": "pnpm run gql-codegen"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@hoppscotch/common": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "axios": "^0.21.4",
@@ -59,10 +62,10 @@
     "eslint-plugin-vue": "^9.5.1",
     "npm-run-all": "^4.1.5",
     "typescript": "^4.6.4",
+    "unplugin-fonts": "^1.0.3",
     "unplugin-icons": "^0.14.9",
     "unplugin-vue-components": "^0.21.0",
     "vite": "^3.2.3",
-    "vite-plugin-fonts": "^0.6.0",
     "vite-plugin-html-config": "^1.0.10",
     "vite-plugin-inspect": "^0.7.4",
     "vite-plugin-pages": "^0.26.0",

packages/hoppscotch-selfhost-web/tsconfig.json

@@ -13,12 +13,11 @@
     "skipLibCheck": true,
     "noEmit": true,
     "paths": {
-      "@hoppscotch/common": [ "../hoppscotch-common/src/index.ts" ],
-      "@hoppscotch/common/*": [ "../hoppscotch-common/src/*" ],
+      "@hoppscotch/common": ["../hoppscotch-common/src/index.ts"],
+      "@hoppscotch/common/*": ["../hoppscotch-common/src/*"],
       "@platform/*": ["./src/platform/*"],
-      "@lib/*": ["./src/lib/*"],
+      "@lib/*": ["./src/lib/*"]
     }
-
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]

packages/hoppscotch-selfhost-web/vite.config.ts

@@ -15,7 +15,7 @@ import Layouts from "vite-plugin-vue-layouts"
 import IconResolver from "unplugin-icons/resolver"
 import { FileSystemIconLoader } from "unplugin-icons/loaders"
 import * as path from "path"
-import { VitePluginFonts } from "vite-plugin-fonts"
+import Unfonts from "unplugin-fonts/vite"
 import legacy from "@vitejs/plugin-legacy"
 
 const ENV = loadEnv("development", path.resolve(__dirname, "../../"))
@@ -217,12 +217,21 @@ export default defineConfig({
         ],
       },
     }),
-    VitePluginFonts({
-      google: {
+    Unfonts({
+      fontsource: {
         families: [
-          "Inter:wght@400;500;600;700;800",
-          "Roboto+Mono:wght@400;500",
-          "Material+Icons",
+          {
+            name: "Inter Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Material Symbols Rounded Variable",
+            variables: ["variable-full"],
+          },
+          {
+            name: "Roboto Mono Variable",
+            variables: ["variable-full"],
+          },
         ],
       },
     }),