feat(ui): switch monospace font from JetBrains Mono to Maple Mono via CDN

- Load Maple Mono variable font (woff2) from jsDelivr CDN with @font-face
- Enable ligatures (calt, liga, zero) on all monospace elements
- Replace JetBrains Mono/Google Fonts link with Maple Mono across code blocks,
  inline-code, kbd and hero terminal

Author: nhktmdzhg

index.html

@@ -33,9 +33,7 @@
       } catch (e) { }
     })();
   </script>
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
+  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
   <title>Fcitx5 Lotus | Bộ gõ tiếng Việt cho Linux</title>
 </head>
 

src/assets/shared.css

@@ -2,6 +2,13 @@
   --max-width: 1200px;
 }
 
+@font-face {
+  font-family: 'Maple Mono';
+  src: url('https://cdn.jsdelivr.net/gh/subframe7536/maple-font@v7.9/woff2/var/MapleMono[wght]-VF.woff2') format('woff2-variations');
+  font-weight: 100 900;
+  font-display: swap;
+}
+
 :root[data-theme='latte'] {
   color-scheme: light;
   --ctp-base: #eff1f5;
@@ -402,7 +409,7 @@ section {
   color: var(--ctp-text);
   padding: 2px 6px;
   border-radius: 4px;
-  font-family: monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 0.9em;
   transition:
     background-color 0.3s,
@@ -425,7 +432,7 @@ section {
 .code-block pre {
   margin: 0;
   color: var(--ctp-text);
-  font-family: monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 0.875rem;
   white-space: pre-wrap;
   word-wrap: break-word;
@@ -560,7 +567,7 @@ section {
   border: 1px solid var(--ctp-surface2);
   border-radius: 4px;
   border-bottom-width: 2px;
-  font-family: monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 0.85rem;
   color: var(--ctp-text);
   transition: all 0.3s;
@@ -591,7 +598,7 @@ section {
 
 .uninstall-card .code-container pre {
   margin: 0;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 0.9rem;
   color: var(--ctp-text);
   white-space: pre-wrap;
@@ -930,4 +937,14 @@ section {
 
 :root .el-button--primary:hover {
   opacity: 0.9;
+}
+
+pre,
+code,
+.inline-code,
+.kbd-key,
+.term-body,
+.term-title,
+.typing {
+  font-feature-settings: 'calt', 'liga', 'zero';
 }

src/components/HeroSection.vue

@@ -308,13 +308,13 @@ onUnmounted(() => {
   flex: 1;
   text-align: center;
   color: var(--ctp-subtext0);
-  font-family: monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 0.75rem;
 }
 
 .term-body {
   padding: 24px;
-  font-family: monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 0.875rem;
   color: var(--ctp-text);
   line-height: 1.6;
@@ -334,7 +334,7 @@ onUnmounted(() => {
   align-items: center;
   min-height: 1.2em;
   color: var(--ctp-text);
-  font-family: monospace;
+  font-family: 'Maple Mono', monospace;
 }
 
 @keyframes blink {

src/components/InteractiveInstaller.vue

@@ -778,14 +778,14 @@ pre {
   margin: 0;
   white-space: pre-wrap;
   word-break: break-all;
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--ctp-text);
 }
 
 code {
-  font-family: 'JetBrains Mono', monospace;
+  font-family: 'Maple Mono', monospace;
   font-size: 0.9rem;
 }