Honor font settings in Element Call

src/models/Call.ts

@@ -52,6 +52,7 @@ import PlatformPeg from "../PlatformPeg";
 import { getCurrentLanguage } from "../languageHandler";
 import DesktopCapturerSourcePicker from "../components/views/elements/DesktopCapturerSourcePicker";
 import Modal from "../Modal";
+import { FontWatcher } from "../settings/watchers/FontWatcher";
 
 const TIMEOUT_MS = 16000;
 
@@ -626,8 +627,6 @@ export class ElementCall extends Call {
 
     private constructor(public readonly groupCall: GroupCall, client: MatrixClient) {
         // Splice together the Element Call URL for this call
-        const url = new URL(SdkConfig.get("element_call").url ?? DEFAULTS.element_call.url!);
-        url.pathname = "/room";
         const params = new URLSearchParams({
             embed: "",
             preload: "",
@@ -637,7 +636,24 @@ export class ElementCall extends Call {
             roomId: groupCall.room.roomId,
             baseUrl: client.baseUrl,
             lang: getCurrentLanguage().replace("_", "-"),
+            fontScale: `${SettingsStore.getValue("baseFontSize") / FontWatcher.DEFAULT_SIZE}`,
         });
+
+        // Set custom fonts
+        if (SettingsStore.getValue("useSystemFont")) {
+            SettingsStore.getValue<string>("systemFont")
+                .split(",")
+                .map((font) => {
+                    // Strip whitespace and quotes
+                    font = font.trim();
+                    if (font.startsWith('"') && font.endsWith('"')) font = font.slice(1, -1);
+                    return font;
+                })
+                .forEach((font) => params.append("font", font));
+        }
+
+        const url = new URL(SdkConfig.get("element_call").url ?? DEFAULTS.element_call.url!);
+        url.pathname = "/room";
         url.hash = `#?${params.toString()}`;
 
         // To use Element Call without touching room state, we create a virtual

test/models/Call-test.ts

@@ -596,6 +596,32 @@ describe("ElementCall", () => {
 
             expect(Call.get(room)).toBeNull();
         });
+
+        it("passes font settings through widget URL", async () => {
+            const originalGetValue = SettingsStore.getValue;
+            SettingsStore.getValue = <T>(name: string, roomId?: string, excludeDefault?: boolean) => {
+                switch (name) {
+                    case "baseFontSize":
+                        return 12 as T;
+                    case "useSystemFont":
+                        return true as T;
+                    case "systemFont":
+                        return "OpenDyslexic, DejaVu Sans" as T;
+                    default:
+                        return originalGetValue<T>(name, roomId, excludeDefault);
+                }
+            };
+
+            await ElementCall.create(room);
+            const call = Call.get(room);
+            if (!(call instanceof ElementCall)) throw new Error("Failed to create call");
+
+            const urlParams = new URLSearchParams(new URL(call.widget.url).hash.slice(1));
+            expect(urlParams.get("fontScale")).toBe("1.2");
+            expect(urlParams.getAll("font")).toEqual(["OpenDyslexic", "DejaVu Sans"]);
+
+            SettingsStore.getValue = originalGetValue;
+        });
     });
 
     describe("instance in a non-video room", () => {