diff --git a/src/contentScripts/views/necessarySettingsWatchers.ts b/src/contentScripts/views/necessarySettingsWatchers.ts
index e1265050..f775f96a 100644
--- a/src/contentScripts/views/necessarySettingsWatchers.ts
+++ b/src/contentScripts/views/necessarySettingsWatchers.ts
@@ -54,7 +54,7 @@ export function setupNecessarySettingsWatchers() {
     () => {
       // Set the default font family
       if (!settings.value.customizeFont && !settings.value.fontFamily) {
-        settings.value.fontFamily = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Roboto Flex", "Noto Sans", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif`
+        settings.value.fontFamily = `-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Roboto Flex", "Noto Sans", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif`
       }
 
       if (settings.value.customizeFont) {
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
index 5c507fce..e819c8a9 100644
--- a/src/styles/fonts.scss
+++ b/src/styles/fonts.scss
@@ -1,14 +1,13 @@
 :root,
 :host {
-  // 爲何 firefox 在 windows 這裏一定要設定 system-ui 否則直接預設正體中文下用明體有這種垃圾設定，即使你後面還是指定了特定字體？？？？？
-  --bew-fonts-basic: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Roboto Flex", "Noto Sans", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif;
-  --bew-fonts-fallback: "PingFang SC", "PingFang HK", "PingFang TC", "Microsoft YaHei", "Microsoft JhengHei", sans-serif;
+  --bew-fonts-basic: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Roboto Flex", "Noto Sans", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue";
+  --bew-fonts-fallback: "Microsoft JhengHei", Arial, sans-serif;
 
   --bew-fonts-english: var(--bew-fonts-basic), var(--bew-fonts-fallback);
   --bew-fonts-mandarin-cn: var(--bew-fonts-basic), "PingFang SC", "Source Han Sans SC VF", "Noto Sans CJK SC",
     "Source Han Sans SC", "Microsoft YaHei", var(--bew-fonts-fallback);
-  // TODO: 使用 CDN 載入 CJK 字體 to prevent 弱撚智 Microsoft JhengHei 視覺干擾
+  // TODO: 使用 CDN 載入思源黑體 to prevent 弱撚智 Microsoft JhengHei 視覺干擾
   /* Microsoft JhengHei 是我見過最腦殘弱智的字體，預設下文字太細，但是 windows 正體中文又預設用這個黑體渲染，能用 cdn 換字體就換 */
   --bew-fonts-mandarin-tw: var(--bew-fonts-basic), "PingFang TC", "Source Han Sans TC VF", "Noto Sans CJK TC",
     "Source Han Sans TC", "Microsoft JhengHei", var(--bew-fonts-fallback);
@@ -17,28 +16,44 @@
     "Source Han Sans HC", "Microsoft JhengHei", var(--bew-fonts-fallback);
 }
 
+.bewly-wrapper,
+.bewly-design {
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: "JetBrains Mono", "Fira Code", "Fira Mono", "Cascadia Code", "Cascadia Mono", ui-monospace,
+      SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  }
+}
+
 :lang(en) .bewly-wrapper,
+:lang(en).bewly-design,
 :lang(en).bewly-design * {
   font-family: var(--bew-font-family, var(--bew-fonts-english));
 }
 
 :lang(zh-CN) .bewly-wrapper,
+:lang(zh-CN).bewly-design,
 :lang(zh-CN).bewly-design * {
   font-family: var(--bew-font-family, var(--bew-fonts-mandarin-cn));
 }
 
 :lang(zh-TW) .bewly-wrapper,
+:lang(zh-TW).bewly-design,
 :lang(zh-TW).bewly-design * {
   font-family: var(--bew-font-family, var(--bew-fonts-mandarin-tw));
 }
 
 :lang(zh-HK) .bewly-wrapper,
+:lang(zh-HK).bewly-design,
 :lang(zh-HK).bewly-design * {
   font-family: var(--bew-font-family, var(--bew-fonts-cantonese));
 }
 
-// 不知道爲何 firefox 用下面這一段樣式優先級別會高過的樣式，先註釋先了
+// // 不知道爲何 firefox 用下面這一段樣式優先級別會高過的樣式，先註釋先了
 // .bewly-wrapper,
+// .bewly-design,
 // .bewly-design * {
 //   font-family: var(--bew-font-family, var(--bew-fonts-english));
 // }