feat: initial fonts support

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}

apps/web/src/components/editor/properties-panel.tsx

@@ -15,6 +15,7 @@ import {
   SelectValue,
   SelectItem,
 } from "../ui/select";
+import { FONT_OPTIONS, type FontFamily } from "@/constants/font-constants";
 
 export function PropertiesPanel() {
   const { activeProject } = useProjectStore();
@@ -49,14 +50,21 @@ export function PropertiesPanel() {
       />
       <div className="flex items-center justify-between gap-6">
         <Label className="text-xs">Font</Label>
-        <Select>
+        <Select
+          defaultValue={element.fontFamily}
+          onValueChange={(value: FontFamily) =>
+            updateTextElement(trackId, element.id, { fontFamily: value })
+          }
+        >
           <SelectTrigger className="w-full text-xs">
             <SelectValue placeholder="Select a font" />
           </SelectTrigger>
           <SelectContent>
-            <SelectItem value="Arial">Arial</SelectItem>
-            <SelectItem value="Helvetica">Helvetica</SelectItem>
-            <SelectItem value="Times New Roman">Times New Roman</SelectItem>
+            {FONT_OPTIONS.map((font) => (
+              <SelectItem key={font.value} value={font.value}>
+                {font.label}
+              </SelectItem>
+            ))}
           </SelectContent>
         </Select>
       </div>

apps/web/src/components/editor/timeline-element.tsx

@@ -24,7 +24,7 @@ import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
 import {
   getTrackElementClasses,
   TIMELINE_CONSTANTS,
-} from "@/lib/timeline-constants";
+} from "@/constants/timeline-constants";
 import {
   DropdownMenu,
   DropdownMenuContent,

apps/web/src/components/editor/timeline-track.tsx

@@ -17,7 +17,7 @@ import type {
   TimelineElement as TimelineElementType,
   DragData,
 } from "@/types/timeline";
-import { TIMELINE_CONSTANTS } from "@/lib/timeline-constants";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 export function TimelineTrackContent({
   track,

apps/web/src/components/editor/timeline.tsx

@@ -50,7 +50,7 @@ import {
   getCumulativeHeightBefore,
   getTotalTracksHeight,
   TIMELINE_CONSTANTS,
-} from "@/lib/timeline-constants";
+} from "@/constants/timeline-constants";
 
 export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their elements.