Merge branch 'self-host-font-files' into 'main'

Self-host the font-files as fonts.googleapis.com can be very slow

See merge request documentation/uilicious-docs-v3!25

.vuepress/config.js

@@ -6,6 +6,11 @@
 // It is not compatible with vuepress 1++
 //
 
+import path from "node:path";
+
+import { viteBundler } from '@vuepress/bundler-vite'
+import { defineUserConfig } from '@vuepress/cli'
+
 import { defaultTheme } from "@vuepress/theme-default";
 import { docsearchPlugin } from "@vuepress/plugin-docsearch";
 import { tocPlugin } from '@vuepress/plugin-toc'
@@ -19,7 +24,21 @@ import summaryToSidebar from "./summary-to-sidebar";
 // Lets tweak base path to /v3/
 let basePath = "/v3/"
 
-export default {
+export default defineUserConfig({
+
+  // vite config
+  bundler: viteBundler({
+    viteOptions: {
+      resolve: {
+        alias: {
+          // this allows us to properly import local font fonts using relative file path
+          '@styles': path.resolve(__dirname, 'styles')
+        }
+      }
+    },
+    vuePluginOptions: {},
+  }),
+
   // Lets tweak base path to /v3/
   base: basePath,
 
@@ -97,7 +116,7 @@ export default {
       lazyLoading: true
     })
   }
-};
+});
 
 function googleTagManager(container_id){
   return ["script", {}, `<!-- Google Tag Manager -->

.vuepress/styles/_typography.scss

@@ -1,4 +1,36 @@
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400&family=Readex+Pro:wght@200;600&display=swap');
+// As fonts.googleapis.com can be very slow!!! We'll host the font files instead.
+//@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400&family=Readex+Pro:wght@200;600&display=swap');
+
+// header
+@font-face {
+    font-family: 'Readex Pro';
+    //src: url("/v3/static/fonts/ReadexPro-VariableFont_HEXP,wght.ttf");
+    src: url(@styles/fonts/ReadexPro-VariableFont_HEXP\,wght.ttf);
+}
+
+// normal text
+@font-face {
+    font-family: 'Noto Sans';
+    src: url(@styles/fonts/NotoSans-Regular.ttf);
+}
+
+@font-face {
+    font-family: 'Noto Sans';
+    src: url(@styles/fonts/NotoSans-Bold.ttf);
+    font-weight: bold;
+}
+
+@font-face {
+    font-family: 'Noto Sans';
+    src: url(@styles/fonts/NotoSans-Italic.ttf);
+    font-style: italic;
+}
+
+// code font face
+@font-face {
+    font-family: 'Fira Code';
+    src: url(@styles/fonts/FiraCode-VariableFont_wght.ttf);
+}
 
 :root {