diff --git a/public/themes/ash.css b/public/themes/ash.css
index 0d0491a..7a6b7a4 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index b026d21..59099c7 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index b33fe32..57ade55 100644
--- a/public/themes/description.css
+++ b/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 */
diff --git a/public/themes/light.css b/public/themes/light.css
index 71c7055..0b24214 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 0b4db7b..c1c8246 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/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);
diff --git a/utils/generateDefaultIcon.ts b/utils/generateDefaultIcon.ts
index 6313b75..0260830 100644
--- a/utils/generateDefaultIcon.ts
+++ b/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)