build: use local fonts

GZTimeWalker · Sep 9, 2022 · 01c8c2f · 01c8c2f
1 parent cc5a137
commit 01c8c2f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 14 deletions.
diff --git a/GZCTF/ClientApp/index.html b/GZCTF/ClientApp/index.html
@@ -5,12 +5,6 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>GZ::CTF</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com"/>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="crossorigin"/>
-    <link
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400&display=swap"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/GZCTF/ClientApp/package.json b/GZCTF/ClientApp/package.json
@@ -63,6 +63,7 @@
     "typescript": "4.7.4",
     "vite": "^3.1.0",
     "vite-plugin-pages": "^0.26.0",
-    "vite-plugin-prismjs": "^0.0.8"
+    "vite-plugin-prismjs": "^0.0.8",
+    "vite-plugin-webfont-dl": "^3.1.1"
   }
 }
diff --git a/GZCTF/ClientApp/pnpm-lock.yaml b/GZCTF/ClientApp/pnpm-lock.yaml
diff --git a/GZCTF/ClientApp/vite.config.ts b/GZCTF/ClientApp/vite.config.ts
@@ -1,9 +1,10 @@
+import eslintPlugin from '@nabla/vite-plugin-eslint'
 import react from '@vitejs/plugin-react'
 import { defineConfig, loadEnv } from 'vite'
 import Pages from 'vite-plugin-pages'
+import prismjs from 'vite-plugin-prismjs'
+import webfontDownload from 'vite-plugin-webfont-dl'
 import tsconfigPaths from 'vite-tsconfig-paths'
-import prismjs from 'vite-plugin-prismjs';
-import eslintPlugin from '@nabla/vite-plugin-eslint'
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd())
@@ -39,15 +40,19 @@ export default defineConfig(({ mode }) => {
     plugins: [
       react(),
       eslintPlugin(), // only for development
+      webfontDownload([
+        'https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap',
+        'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;1,400&display=swap',
+      ]),
       Pages({
         dirs: [{ dir: 'src/pages', baseRoute: '' }],
       }),
       tsconfigPaths(),
       prismjs({
         languages: 'all',
         plugins: ['line-numbers'],
-        css: true
-      })
+        css: true,
+      }),
     ],
   }
 })