diff --git a/src-tauri/src/core/verge.rs b/src-tauri/src/core/verge.rs
index b659dc0fb8c1ed0db19a12007e554d4f99acbf63..7dcd0d5bc0eb8d98d41cc3125d8613a52e2a536b 100644
--- a/src-tauri/src/core/verge.rs
+++ b/src-tauri/src/core/verge.rs
@@ -63,7 +63,7 @@ pub struct VergeTheme {
   pub success_color: Option<String>,
 
   pub font_family: Option<String>,
-  pub font_face: Option<String>,
+  pub css_injection: Option<String>,
 }
 
 impl VergeConfig {
diff --git a/src/components/layout/use-custom-theme.ts b/src/components/layout/use-custom-theme.ts
index de936a949c962c2722bfd43c7a436ae34384b4f1..89a79b5d70e09e9a3f2d9d9f76ac803b43bb11e6 100644
--- a/src/components/layout/use-custom-theme.ts
+++ b/src/components/layout/use-custom-theme.ts
@@ -40,12 +40,25 @@ export default function useCustomTheme() {
         },
       },
       typography: {
+        // todo
         fontFamily: setting.font_family
-          ? `"${setting.font_family}", ${dt.font_family}`
+          ? `${setting.font_family}, ${dt.font_family}`
           : dt.font_family,
       },
     });
 
+    // inject css
+    let style = document.querySelector("style#verge-theme");
+    if (!style) {
+      style = document.createElement("style");
+      style.id = "verge-theme";
+      document.head.appendChild(style!);
+    }
+    if (style) {
+      style.innerHTML = setting.css_injection || "";
+    }
+
+    // update svg icon
     const { palette } = theme;
 
     setTimeout(() => {
diff --git a/src/components/setting/setting-theme.tsx b/src/components/setting/setting-theme.tsx
index 2dc3ec2d6023d837a026d38429e711b6d07e1bfd..5fb6c2ce9e6295583be0fa8dd60bfbf0a3cd6aab 100644
--- a/src/components/setting/setting-theme.tsx
+++ b/src/components/setting/setting-theme.tsx
@@ -65,6 +65,7 @@ const SettingTheme = (props: Props) => {
     try {
       await patchVergeConfig({ theme_setting: theme });
       mutate();
+      onClose();
     } catch (err: any) {
       onError?.(err);
     }
@@ -186,12 +187,12 @@ const SettingTheme = (props: Props) => {
           </Item>
 
           <Item>
-            <ListItemText primary="Font Face" />
+            <ListItemText primary="CSS Injection" />
 
             <TextField
               {...textProps}
-              value={theme.font_face ?? ""}
-              onChange={handleChange("font_face")}
+              value={theme.css_injection ?? ""}
+              onChange={handleChange("css_injection")}
             />
           </Item>
         </List>
diff --git a/src/services/types.ts b/src/services/types.ts
index b098c0fccb8cb8a30ebb3ddf0a53ce6108654506..0d5bf3c608ceeaea2dd467e53de788515be4afe5 100644
--- a/src/services/types.ts
+++ b/src/services/types.ts
@@ -139,8 +139,8 @@ export namespace CmdType {
       error_color?: string;
       warning_color?: string;
       success_color?: string;
-      font_face?: string;
       font_family?: string;
+      css_injection?: string;
     };
   }