From 4a5c9e990ca2dca3106b7bbe674b21cf58acec7d Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Wed, 25 Mar 2026 17:56:48 +0100
Subject: [PATCH] fix(editor): ensure font picker font names are not quoted
 (#11036)

---
 .../components/FontPicker/FontPickerList.tsx         | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/excalidraw/components/FontPicker/FontPickerList.tsx b/packages/excalidraw/components/FontPicker/FontPickerList.tsx
index e5e7b85aea..5d107cbeb1 100644
--- a/packages/excalidraw/components/FontPicker/FontPickerList.tsx
+++ b/packages/excalidraw/components/FontPicker/FontPickerList.tsx
@@ -46,6 +46,7 @@ import {
 import { fontPickerKeyHandler } from "./keyboardNavHandlers";
 
 import type { JSX } from "react";
+import type { ExcalidrawFontFace } from "../../fonts/ExcalidrawFontFace";
 
 export interface FontDescriptor {
   value: number;
@@ -86,6 +87,15 @@ const getFontFamilyIcon = (fontFamily: FontFamilyValues): JSX.Element => {
   }
 };
 
+const getFontFamilyLabel = (
+  fontFamily: FontFamilyValues,
+  fontFaces: ExcalidrawFontFace[],
+) =>
+  // prefer our config as the browser resolved names may be wrapped in quotes and such
+  Object.entries(FONT_FAMILY).find(([, id]) => id === fontFamily)?.[0] ??
+  fontFaces[0]?.fontFace?.family ??
+  "Unknown";
+
 export const FontPickerList = React.memo(
   ({
     selectedFontFamily,
@@ -114,7 +124,7 @@ export const FontPickerList = React.memo(
             const fontDescriptor = {
               value: familyId,
               icon: getFontFamilyIcon(familyId),
-              text: fontFaces[0]?.fontFace?.family ?? "Unknown",
+              text: getFontFamilyLabel(familyId, fontFaces),
             };
 
             if (metadata.deprecated) {