diff --git a/src/lib/cards/FluidTextCard/FluidTextCard.svelte b/src/lib/cards/FluidTextCard/FluidTextCard.svelte
--- a/src/lib/cards/FluidTextCard/FluidTextCard.svelte
+++ b/src/lib/cards/FluidTextCard/FluidTextCard.svelte
@@ -19,7 +19,7 @@
 	const text = $derived((item.cardData?.text as string) || 'hello');
 	const fontWeight = '900';
 	const fontFamily = 'Arial';
-	const fontSize = $derived((item.cardData?.fontSize as number) || 0.13);
+	const fontSize = $derived(parseFloat(item.cardData?.fontSize) || 0.33);
 
 	// Draw text mask on overlay canvas
 	function drawOverlayCanvas() {
diff --git a/src/lib/cards/FluidTextCard/FluidTextCardSettings.svelte b/src/lib/cards/FluidTextCard/FluidTextCardSettings.svelte
--- a/src/lib/cards/FluidTextCard/FluidTextCardSettings.svelte
+++ b/src/lib/cards/FluidTextCard/FluidTextCardSettings.svelte
@@ -10,7 +10,7 @@
 		item.cardData.fontSize = 0.33;
 	}
 
-	const displayPercent = $derived(Math.round((item.cardData.fontSize as number) * 100));
+	const displayPercent = $derived(Math.round((parseFloat(item.cardData.fontSize) as number) * 100));
 </script>
 
 <div class="flex flex-col gap-3">
@@ -26,9 +26,9 @@
 			min="0.1"
 			max="0.8"
 			step="0.01"
-			value={item.cardData.fontSize ?? 0.33}
+			value={parseFloat(item.cardData.fontSize) ?? 0.33}
 			oninput={(e) => {
-				item.cardData.fontSize = parseFloat(e.currentTarget.value);
+				item.cardData.fontSize = e.currentTarget.value.toString();
 			}}
 			class="bg-base-200 dark:bg-base-700 h-2 w-full cursor-pointer appearance-none rounded-lg"
 		/>