From 2f6fc6bba24140367c5ecdd18d40d611251d9997 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 23 Jun 2020 17:54:38 +0200
Subject: [PATCH] allow adding custom font faces in theme

---
 src/theme.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/theme.js b/src/theme.js
index 7e0eaabf11..d560cc96c8 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -43,8 +43,23 @@ function clearCustomTheme() {
             document.body.style.removeProperty(prop);
         }
     }
+    const customFontFaceStyle = document.querySelector("head > style[title='custom-theme-font-faces']");
+    if (customFontFaceStyle) {
+        customFontFaceStyle.remove();
+    }
 }
 
+function generateCustomFontFaceCSS(faces) {
+    return Object.entries(faces).map(([fontName, face]) => {
+        const src = Object.entries(face.src).map(([format, url]) => {
+            return `url('${url}') format('${format}')`;
+        }).join(", ");
+        return `@font-face {` +
+        `    font-family: '${fontName}';` +
+        `    src: ${src};` +
+        `}`;
+    }).join("\n");
+}
 
 function setCustomThemeVars(customTheme) {
     const {style} = document.body;
@@ -72,6 +87,14 @@ function setCustomThemeVars(customTheme) {
     }
     if (customTheme.fonts) {
         const {fonts} = customTheme;
+        if (fonts.faces) {
+            const css = generateCustomFontFaceCSS(fonts.faces);
+            const style = document.createElement("style");
+            style.setAttribute("title", "custom-theme-font-faces");
+            style.setAttribute("type", "text/css");
+            style.appendChild(document.createTextNode(css));
+            document.head.appendChild(style);
+        }
         if (fonts.general) {
             style.setProperty("--font-family", fonts.general);
         }