public/themes/ash.css

@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }

public/themes/dark.css

@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }

public/themes/description.css

@@ -24,7 +24,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */

public/themes/light.css

@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }

public/themes/rainbow-capitalism.css

@@ -23,7 +23,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 
     /* --optional-body-background: background */
     --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);

utils/generateDefaultIcon.ts

@@ -27,7 +27,8 @@ export default (name: string, seed: string): string => {
 		ctx.fillStyle = 'white'
 		ctx.textAlign = 'center'
 		ctx.textBaseline = 'middle'
-		const preferredFont = document.documentElement.style.getPropertyValue("--preferred-font")
+		const root = document.documentElement;
+		const preferredFont = getComputedStyle(root).getPropertyValue("--preferred-font");
 		ctx.font = `bold 96px ${preferredFont}, Arial, Helvetica, sans-serif`
 		// 136 isn't actually centered, but it *looks* centered
 		ctx.fillText(previewName, 128, 136)