diff --git a/config/themes/typewriter/theme.yaml b/config/themes/typewriter/theme.yaml
index 32fde01..66ea5a6 100644
--- a/config/themes/typewriter/theme.yaml
+++ b/config/themes/typewriter/theme.yaml
@@ -6,14 +6,12 @@ colors:
   primary_dark: '#005384'
   secondary: '#00B0F0'
   text_dark: '#616161'
-
 favicon:
   path: favicon.png
-  
 fonts:
   primary:
-    name: trixie.woff
+    name: trixie
     fallback: sans-serif
   secondary:
-    name: trixie.woff
+    name: trixie
     fallback: serif
diff --git a/src/py/webui/webui.py b/src/py/webui/webui.py
index dbf7810..98dc758 100644
--- a/src/py/webui/webui.py
+++ b/src/py/webui/webui.py
@@ -415,7 +415,8 @@ def upload_font():
     fonts_dir = Path(__file__).resolve().parents[3] / "config" / "themes" / theme_name / "fonts"
     fonts_dir.mkdir(parents=True, exist_ok=True)
     file.save(fonts_dir / file.filename)
-    return jsonify({"status": "ok", "filename": file.filename})
+    font_basename = Path(file.filename).stem
+    return jsonify({"status": "ok", "filename": font_basename})
 
 @app.route("/api/font/remove", methods=["POST"])
 def remove_font():
diff --git a/src/webui/js/theme-editor.js b/src/webui/js/theme-editor.js
index 4d853f3..481c51d 100644
--- a/src/webui/js/theme-editor.js
+++ b/src/webui/js/theme-editor.js
@@ -70,9 +70,11 @@ function setupColorPicker(colorId, btnId, textId, initial) {
 function setFontDropdown(selectId, value, options) {
   const select = document.getElementById(selectId);
   if (!select) return;
-  select.innerHTML = options.map(opt =>
-    `<option value="${opt}"${opt === value ? " selected" : ""}>${opt}</option>`
-  ).join("");
+  select.innerHTML = options.map(opt => {
+    // Remove extension if present
+    const base = opt.replace(/\.(woff2?|ttf|otf)$/, "");
+    return `<option value="${base}"${base === value ? " selected" : ""}>${base}</option>`;
+  }).join("");
 }
 
 function setFallbackDropdown(selectId, value) {