1 files changed, 31 insertions, 0 deletions
diff --git a/packages/frontend/src/scripts/theme.ts b/packages/frontend/src/scripts/theme.ts
index d2474bf10f..8bfb03f0dd 100644
--- a/packages/frontend/src/scripts/theme.ts
+++ b/packages/frontend/src/scripts/theme.ts
@@ -54,6 +54,8 @@ export const getBuiltinThemesRef = () => {
 	return builtinThemes;
 };
 
+const themeFontFaceName = 'sharkey-theme-font-face';
+
 let timeout = null;
 
 export function applyTheme(theme: Theme, persist = true) {
@@ -84,7 +86,32 @@ export function applyTheme(theme: Theme, persist = true) {
 		}
 	}
 
+	let existingFontFace;
+	document.fonts.forEach(
+		(fontFace) => {
+			if (fontFace.family === themeFontFaceName) existingFontFace = fontFace;
+		},
+	);
+	if (existingFontFace) document.fonts.delete(existingFontFace);
+
+	const fontFaceSrc = props.fontFaceSrc;
+	const fontFaceOpts = props.fontFaceOpts || {};
+
+	if (fontFaceSrc) {
+		const fontFace = new FontFace(
+			themeFontFaceName,
+			fontFaceSrc, fontFaceOpts,
+		);
+		document.fonts.add(fontFace);
+		fontFace.load().catch(
+			(failure) => {
+				console.log(failure);
+			},
+		);
+	}
+
 	for (const [k, v] of Object.entries(props)) {
+		if (k.startsWith('font')) continue;
 		document.documentElement.style.setProperty(`--${k}`, v.toString());
 	}
 
@@ -128,6 +155,10 @@ function compile(theme: Theme): Record<string, string> {
 
 	for (const [k, v] of Object.entries(theme.props)) {
 		if (k.startsWith('$')) continue; // ignore const
+		if (k.startsWith('font')) { // font specs are different
+			props[k] = v;
+			continue;
+		}
 
 		props[k] = v.startsWith('"') ? v.replace(/^"\s*/, '') : genValue(getColor(v));
 	}