diff --git a/packages/backend/src/tailwind/tailwindTextBuilder.ts b/packages/backend/src/tailwind/tailwindTextBuilder.ts
index a20a5b76..ca3518e2 100644
--- a/packages/backend/src/tailwind/tailwindTextBuilder.ts
+++ b/packages/backend/src/tailwind/tailwindTextBuilder.ts
@@ -100,8 +100,9 @@ export class TailwindTextBuilder extends TailwindDefaultBuilder {
     if (config.fontFamily.mono.includes(fontName.family)) {
       return "font-mono";
     }
+    const underscoreFontName = fontName.family.replace(/\s/g, "_");
 
-    return "font-['" + fontName.family + "']";
+    return "font-['" + underscoreFontName + "']";
   };
 
   /**
@@ -241,8 +242,7 @@ export class TailwindTextBuilder extends TailwindDefaultBuilder {
     if (this.node && (this.node as TextNode).effects) {
       const effects = (this.node as TextNode).effects;
       const blurEffect = effects.find(
-        (effect) =>
-          effect.type === "LAYER_BLUR" && effect.visible !== false,
+        (effect) => effect.type === "LAYER_BLUR" && effect.visible !== false,
       );
       if (blurEffect && blurEffect.radius && blurEffect.radius > 0) {
         const blurSuffix = pxToBlur(blurEffect.radius);
@@ -266,8 +266,7 @@ export class TailwindTextBuilder extends TailwindDefaultBuilder {
     if (this.node && (this.node as TextNode).effects) {
       const effects = (this.node as TextNode).effects;
       const dropShadow = effects.find(
-        (effect) =>
-          effect.type === "DROP_SHADOW" && effect.visible !== false,
+        (effect) => effect.type === "DROP_SHADOW" && effect.visible !== false,
       );
       if (dropShadow) {
         const ds = dropShadow as DropShadowEffect;