diff --git a/app/src/config/editor.ts b/app/src/config/editor.ts
index de55decdf..2fb996d92 100644
--- a/app/src/config/editor.ts
+++ b/app/src/config/editor.ts
@@ -7,12 +7,11 @@ import {updateHotkeyTip} from "../protyle/util/compatibility";
 import {Constants} from "../constants";
 import {resize} from "../protyle/util/resize";
 import {setReadOnly} from "./util/setReadOnly";
+import {Menu} from "../plugin/Menu";
 
 export const editor = {
     element: undefined as Element,
     genHTML: () => {
-        let fontFamilyHTML = "";
-        fontFamilyHTML = '<select id="fontFamily" class="b3-select fn__flex-center fn__size200"></select>';
         return `<label class="fn__flex b3-label">
     <div class="fn__flex-1">
         ${window.siyuan.languages.fullWidth}
@@ -244,7 +243,7 @@ export const editor = {
         <div class="b3-label__text">${window.siyuan.languages.font1}</div>
     </div>
     <span class="fn__space"></span>
-    ${fontFamilyHTML}
+    <input readonly id="fontFamily" class="b3-text-field fn__flex-center fn__size200" value="${window.siyuan.config.editor.fontFamily || window.siyuan.languages.default}"/>
 </div>
 <label class="fn__flex b3-label">
     <div class="fn__flex-1">
@@ -357,15 +356,35 @@ export const editor = {
     },
     bindEvent: () => {
         const fontFamilyElement = editor.element.querySelector("#fontFamily") as HTMLSelectElement;
-        if (fontFamilyElement.tagName === "SELECT") {
-            let fontFamilyHTML = `<option value="">${window.siyuan.languages.default}</option>`;
+        fontFamilyElement.addEventListener("click", () => {
             fetchPost("/api/system/getSysFonts", {}, (response) => {
-                response.data.forEach((item: string) => {
-                    fontFamilyHTML += `<option value="${item}" style='font-family:"${item}",var(--b3-font-family);'${window.siyuan.config.editor.fontFamily === item ? " selected" : ""}>${item}</option>`;
+                const fontMenu = new Menu();
+                fontMenu.addItem({
+                    iconHTML: "",
+                    checked: window.siyuan.config.editor.fontFamily === "",
+                    label: `<div style='var(--b3-font-family);'>${window.siyuan.languages.default}</div>`,
+                    click: () => {
+                        fontFamilyElement.value = "";
+                    }
                 });
-                fontFamilyElement.innerHTML = fontFamilyHTML;
+                response.data.forEach((item: string) => {
+                    fontMenu.addItem({
+                        iconHTML: "",
+                        checked: window.siyuan.config.editor.fontFamily === item,
+                        label: `<div style='font-family:"${item}",var(--b3-font-family);'>${item}</div>`,
+                        click: () => {
+                            fontFamilyElement.value = item;
+                        }
+                    });
+                });
+                const rect = fontFamilyElement.getBoundingClientRect();
+                fontMenu.open({
+                    x: rect.left,
+                    y: rect.bottom
+                })
             });
-        }
+        })
+
         editor.element.querySelector("#clearHistory").addEventListener("click", () => {
             confirmDialog(window.siyuan.languages.clearHistory, window.siyuan.languages.confirmClearHistory, () => {
                 fetchPost("/api/history/clearWorkspaceHistory", {});