From e8b0057cc44c90af24f52e44ada60493e6ef6311 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 10 Jul 2025 20:53:58 +0200
Subject: feat: initial fonts support

---
 apps/web/src/components/editor/preview-panel.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'apps/web/src/components/editor/preview-panel.tsx')

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 09341ee9..c5621fea 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -20,6 +20,7 @@ import { Play, Pause } from "lucide-react";
 import { useState, useRef, useEffect } from "react";
 import { cn } from "@/lib/utils";
 import { formatTimeCode } from "@/lib/time";
+import { FONT_CLASS_MAP } from "@/lib/font-config";
 
 interface ActiveElement {
   element: TimelineElement;
@@ -141,6 +142,9 @@ export function PreviewPanel() {
 
     // Text elements
     if (element.type === "text") {
+      const fontClassName =
+        FONT_CLASS_MAP[element.fontFamily as keyof typeof FONT_CLASS_MAP] || "";
+
       return (
         <div
           key={element.id}
@@ -154,9 +158,9 @@ export function PreviewPanel() {
           }}
         >
           <div
+            className={fontClassName}
             style={{
               fontSize: `${element.fontSize}px`,
-              fontFamily: element.fontFamily,
               color: element.color,
               backgroundColor: element.backgroundColor,
               textAlign: element.textAlign,
@@ -166,6 +170,8 @@ export function PreviewPanel() {
               padding: "4px 8px",
               borderRadius: "2px",
               whiteSpace: "pre-wrap",
+              // Fallback for system fonts that don't have classes
+              ...(fontClassName === "" && { fontFamily: element.fontFamily }),
             }}
           >
             {element.content}
-- 
cgit v1.3.1