From b3fd1eda03ebe6ac252d842b22b8a8db48a1463c Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 24 Jun 2020 14:54:14 +0200
Subject: [PATCH] change the format of font faces to something closer to the
 css

---
 src/theme.js | 45 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/theme.js b/src/theme.js
index ee9cb9c7db..bfee597da4 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -49,15 +49,46 @@ function clearCustomTheme() {
     }
 }
 
+const allowedFontFaceProps = [
+    "font-display",
+    "font-family",
+    "font-stretch",
+    "font-style",
+    "font-weight",
+    "font-variant",
+    "font-feature-settings",
+    "font-variation-settings",
+    "src",
+    "unicode-range"
+];
+
 function generateCustomFontFaceCSS(faces) {
-    return Object.entries(faces).map(([fontName, face]) => {
-        const src = Object.entries(face.src).map(([format, url]) => {
-            return `url('${url}') format('${format}')`;
+    return faces.map(face => {
+        const src = face.src && face.src.map(srcElement => {
+            let format;
+            if (srcElement.format) {
+                format = `format("${srcElement.format}")`;
+            }
+            if (srcElement.url) {
+                return `url("${srcElement.url}") ${format}`;
+            } else if (srcElement.local) {
+                return `local("${srcElement.local}") ${format}`;
+            }
+            return "";
         }).join(", ");
-        return `@font-face {` +
-        `    font-family: '${fontName}';` +
-        `    src: ${src};` +
-        `}`;
+        const props = Object.keys(face).filter(prop => allowedFontFaceProps.includes(prop));
+        const body = props.map(prop => {
+            let value;
+            if (prop === "src") {
+                value = src;
+            } else if (prop === "font-family") {
+                value = `"${face[prop]}"`;
+            } else {
+                value = face[prop];
+            }
+            return `${prop}: ${value}`;
+        }).join(";");
+        return `@font-face {${body}}`;
     }).join("\n");
 }