diff --git a/assets/zh-Hans.lproj/Localizable.strings b/assets/zh-Hans.lproj/Localizable.strings
index b95edc9..fa39645 100644
Binary files a/assets/zh-Hans.lproj/Localizable.strings and b/assets/zh-Hans.lproj/Localizable.strings differ
diff --git a/assets/zh-Hant.lproj/Localizable.strings b/assets/zh-Hant.lproj/Localizable.strings
index bc9a23a..4cd6c56 100644
Binary files a/assets/zh-Hant.lproj/Localizable.strings and b/assets/zh-Hant.lproj/Localizable.strings differ
diff --git a/fcitx5 b/fcitx5
index c5b0429..29168bd 160000
--- a/fcitx5
+++ b/fcitx5
@@ -1 +1 @@
-Subproject commit c5b0429b9fb861e24489438e9e573316295dd823
+Subproject commit 29168bd28f5d50c7fbefb7d2360fc6fc77760152
diff --git a/fcitx5-webview b/fcitx5-webview
index eaa3b57..781e802 160000
--- a/fcitx5-webview
+++ b/fcitx5-webview
@@ -1 +1 @@
-Subproject commit eaa3b57b32f1722860cd1795729cc334539b0511
+Subproject commit 781e802257250c1df4f59467fc98af7498df7140
diff --git a/src/config/FontView.swift b/src/config/FontView.swift
new file mode 100644
index 0000000..1c1eddb
--- /dev/null
+++ b/src/config/FontView.swift
@@ -0,0 +1,123 @@
+import SwiftUI
+
+let genericFamilies = [
+  "cursive",
+  "fangsong",
+  "fantasy",
+  "kai",
+  "khmer-mul",
+  // "math", // Not supported by Safari
+  "monospace",
+  "nastaliq",
+  "sans-serif",
+  "serif",
+  "system-ui",
+  "ui-monospace",
+  "ui-rounded",
+  "ui-sans-serif",
+  "ui-serif",
+]
+
+struct FontOptionView: OptionView {
+  let label: String
+  @ObservedObject var model: FontOption
+  @State private var selectorIsOpen = false
+  @State var searchInput = ""
+  @State var previewInput = NSLocalizedString("Preview", comment: "")
+
+  // If initialize [], the sheet will list nothing on first open.
+  @State var availableFontFamilies = NSFontManager.shared.availableFontFamilies
+  var filteredFontFamilies: [String] {
+    if searchInput.trimmingCharacters(in: .whitespaces).isEmpty {
+      return availableFontFamilies
+    } else {
+      return availableFontFamilies.filter {
+        $0.localizedCaseInsensitiveContains(searchInput)
+          || localize($0).localizedCaseInsensitiveContains(searchInput)
+      }
+    }
+  }
+  @State private var selectedFontFamily: String?
+
+  var body: some View {
+    Button(action: openSelector) {
+      if model.value.isEmpty {
+        Text("Select font")
+      } else {
+        Text(localize(model.value))
+      }
+    }
+    .sheet(isPresented: $selectorIsOpen) {
+      VStack {
+        TabView {
+          VStack {
+            TextField(NSLocalizedString("Search", comment: ""), text: $searchInput)
+            TextField(NSLocalizedString("Preview", comment: ""), text: $previewInput)
+            Text(previewInput).font(Font.custom(selectedFontFamily ?? model.value, size: 32)).frame(
+              height: 64)
+            List(selection: $selectedFontFamily) {
+              ForEach(filteredFontFamilies, id: \.self) { family in
+                HStack {
+                  Text(localize(family)).font(Font.custom(family, size: 14))
+                  Spacer()
+                  Text(localize(family))
+                }
+              }
+            }.contextMenu(forSelectionType: String.self) { items in
+            } primaryAction: { items in
+              // Double click
+              select()
+            }
+          }.padding()
+            .tabItem { Text("Font family") }
+
+          VStack {
+            List(selection: $selectedFontFamily) {
+              ForEach(genericFamilies, id: \.self) { family in
+                Text(family)
+              }
+            }.contextMenu(forSelectionType: String.self) { items in
+            } primaryAction: { items in
+              // Double click
+              select()
+            }
+          }.padding()
+            .tabItem { Text("Generic font families") }
+        }
+
+        HStack {
+          Button {
+            selectorIsOpen = false
+          } label: {
+            Text("Cancel")
+          }
+          Spacer()
+          Button {
+            select()
+          } label: {
+            Text("Select")
+          }.buttonStyle(.borderedProminent)
+            .disabled(selectedFontFamily == nil)
+        }.padding([.leading, .trailing, .bottom])
+      }
+      .padding(.top)
+      .frame(minWidth: 500, minHeight: 600)
+    }
+  }
+
+  private func openSelector() {
+    availableFontFamilies = NSFontManager.shared.availableFontFamilies
+    selectorIsOpen = true
+  }
+
+  private func select() {
+    if let selectedFontFamily = selectedFontFamily {
+      model.value = selectedFontFamily
+    }
+    selectorIsOpen = false
+  }
+
+  private func localize(_ fontFamily: String) -> String {
+    return NSFontManager.shared.localizedName(forFamily: fontFamily, face: nil)
+  }
+}
diff --git a/src/config/optionviews.swift b/src/config/optionviews.swift
index c26c559..af84d44 100644
--- a/src/config/optionviews.swift
+++ b/src/config/optionviews.swift
@@ -387,91 +387,6 @@ struct ListOptionView<T: Option & EmptyConstructible>: OptionView {
   }
 }
 
-struct FontOptionView: OptionView {
-  let label: String
-  @ObservedObject var model: FontOption
-  @State private var selectorIsOpen = false
-  @State var searchInput = ""
-  @State var previewInput = NSLocalizedString("Preview", comment: "")
-
-  // If initialize [], the sheet will list nothing on first open.
-  @State var availableFontFamilies = NSFontManager.shared.availableFontFamilies
-  var filteredFontFamilies: [String] {
-    if searchInput.trimmingCharacters(in: .whitespaces).isEmpty {
-      return availableFontFamilies
-    } else {
-      return availableFontFamilies.filter {
-        $0.localizedCaseInsensitiveContains(searchInput)
-          || localize($0).localizedCaseInsensitiveContains(searchInput)
-      }
-    }
-  }
-  @State private var selectedFontFamily: String?
-
-  var body: some View {
-    Button(action: openSelector) {
-      if model.value.isEmpty {
-        Text("Select font")
-      } else {
-        Text(localize(model.value))
-      }
-    }
-    .sheet(isPresented: $selectorIsOpen) {
-      VStack {
-        TextField(NSLocalizedString("Search", comment: ""), text: $searchInput)
-        TextField(NSLocalizedString("Preview", comment: ""), text: $previewInput)
-        Text(previewInput).font(Font.custom(selectedFontFamily ?? model.value, size: 32)).frame(
-          height: 64)
-        List(selection: $selectedFontFamily) {
-          ForEach(filteredFontFamilies, id: \.self) { family in
-            HStack {
-              Text(localize(family)).font(Font.custom(family, size: 14))
-              Spacer()
-              Text(localize(family))
-            }
-          }
-        }.contextMenu(forSelectionType: String.self) { items in
-        } primaryAction: { items in
-          // Double click
-          select()
-        }
-        HStack {
-          Button {
-            selectorIsOpen = false
-          } label: {
-            Text("Cancel")
-          }
-          Spacer()
-          Button {
-            select()
-          } label: {
-            Text("Select")
-          }.buttonStyle(.borderedProminent)
-            .disabled(selectedFontFamily == nil)
-        }
-      }
-      .padding()
-      .frame(minWidth: 500, minHeight: 600)
-    }
-  }
-
-  private func openSelector() {
-    availableFontFamilies = NSFontManager.shared.availableFontFamilies
-    selectorIsOpen = true
-  }
-
-  private func select() {
-    if let selectedFontFamily = selectedFontFamily {
-      model.value = selectedFontFamily
-    }
-    selectorIsOpen = false
-  }
-
-  private func localize(_ fontFamily: String) -> String {
-    return NSFontManager.shared.localizedName(forFamily: fontFamily, face: nil)
-  }
-}
-
 struct PunctuationMapOptionView: OptionView {
   let label: String
   @ObservedObject var model: PunctuationMapOption