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

packages/hoppscotch-common/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-common/package.json

@@ -33,6 +33,9 @@
     "@codemirror/search": "^6.0.0",
     "@codemirror/state": "^6.1.0",
     "@codemirror/view": "^6.0.2",
+    "@fontsource-variable/inter": "^5.0.5",
+    "@fontsource-variable/material-symbols-rounded": "^5.0.5",
+    "@fontsource-variable/roboto-mono": "^5.0.6",
     "@hoppscotch/codemirror-lang-graphql": "workspace:^",
     "@hoppscotch/data": "workspace:^",
     "@hoppscotch/js-sandbox": "workspace:^",
@@ -139,11 +142,11 @@
     "rollup-plugin-polyfill-node": "^0.10.1",
     "sass": "^1.53.0",
     "typescript": "^4.5.4",
+    "unplugin-fonts": "^1.0.3",
     "unplugin-icons": "^0.14.9",
     "unplugin-vue-components": "^0.21.0",
     "vite": "^3.1.4",
     "vite-plugin-checker": "^0.5.1",
-    "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-common/src/index.ts

@@ -10,6 +10,9 @@ import "virtual:windi.css"
 import "../assets/scss/themes.scss"
 import "../assets/scss/styles.scss"
 import "nprogress/nprogress.css"
+import "@fontsource-variable/inter"
+import "@fontsource-variable/material-symbols-rounded"
+import "@fontsource-variable/roboto-mono"
 
 import App from "./App.vue"
 

packages/hoppscotch-common/tsconfig.json

@@ -15,17 +15,18 @@
     "skipLibCheck": true,
     "noUnusedLocals": true,
     "paths": {
-      "~/*": [ "./src/*" ],
-      "@composables/*": [ "./src/composables/*" ],
-      "@components/*": [ "./src/components/*" ],
-      "@helpers/*": [ "./src/helpers/*" ],
-      "@modules/*": [ "./src/modules/*" ],
-      "@workers/*": [ "./src/workers/*" ],
-      "@functional/*": [ "./src/helpers/functional/*" ]
+      "~/*": ["./src/*"],
+      "@composables/*": ["./src/composables/*"],
+      "@components/*": ["./src/components/*"],
+      "@helpers/*": ["./src/helpers/*"],
+      "@modules/*": ["./src/modules/*"],
+      "@workers/*": ["./src/workers/*"],
+      "@functional/*": ["./src/helpers/functional/*"]
     },
     "types": [
       "vite/client",
       "unplugin-icons/types/vue",
+      "unplugin-fonts/client",
       "vite-plugin-pages/client",
       "vite-plugin-vue-layouts/client",
       "vite-plugin-pwa/client"

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"],
+          },
         ],
       },
     }),

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';