How do I add custom fonts to the OpenCut editor?

Copy fonts into apps/web/public/fonts, register @font-face rules, extend tailwind.config.ts, and preload the font in the editor font registry so both canvas and preview use it.

Add Custom Fonts to the OpenCut Editor

OpenCut uses Tailwind and a shared font registry to render text consistently.

Steps

Copy the font files:

mkdir -p apps/web/public/fonts
cp ~/Downloads/NeonStream.woff2 apps/web/public/fonts/neon-stream.woff2

extend: {
  fontFamily: {
    neon: ['"NeonStream"', 'cursive']
  }
}

Add an @font-face rule (apps/web/styles/fonts.css):

@font-face {
  font-family: 'NeonStream';
  src: url('/fonts/neon-stream.woff2') format('woff2');
  font-display: swap;
}

Import the CSS in _app.tsx or globals.css:
```
import '../styles/fonts.css';
```
Preload in the editor font registry (e.g., apps/web/src/lib/fonts.ts):
```
fontRegistry.load('NeonStream', '/fonts/neon-stream.woff2');
```

Diagram

  flowchart TD
    A[public/fonts] --> B[@font-face]
    B --> C[Tailwind classes]
    C --> D[Timeline canvas]

Commit the font assets so deployments (Vercel, Docker) ship with identical typography.