[BUG] ext overlay export fails when using default built-in fonts

[Krishnx21]

Bug Summary

Video export fails when a text overlay uses the default built-in font.

File

src/lib/text-overlay.ts (around line 91)

Current Code

let filter = `drawtext=text='${escapedText}':x=${pixelX}:y=${pixelY}:fontsize=${overlay.fontSize}:fontcolor=${overlay.color}:fontweight=${fontWeightParam}`;

if (overlay.fontFamily) {
  const safeFontName = overlay.fontFamily.replace(/[^a-zA-Z0-9-]/g, "");
  filter += `:fontfile='${safeFontName}'`;
}

Root Cause

The drawtext filter's fontfile parameter expects a valid font file path that exists inside FFmpeg's virtual filesystem.

However, the default overlay uses:

fontFamily: "Arial"

which generates:

fontfile='Arial'

No file named Arial is written into the FFmpeg filesystem, causing drawtext initialization to fail.

Steps to Reproduce

1. Upload any valid video.
2. Open the Text Overlay tool.
3. Click "Add Text".
4. Leave the default font unchanged.
5. Export as MP4, WebM, MKV, or GIF.

Actual Behavior

FFmpeg receives an invalid drawtext filter:

fontfile='Arial'

The font file cannot be found, causing export failure.

Expected Behavior

Text overlays using built-in/default fonts should export successfully without requiring a font file path.

Impact

• Default text overlays can break exports.
• Users encounter failed exports without providing invalid input.
• The text overlay workflow becomes unusable for many users.

Suggested Fix

• Do not set fontfile for built-in fonts.
• Allow FFmpeg to use its default font when no custom font file exists.
• For custom fonts, write the uploaded font into FFmpeg's virtual filesystem and reference the actual file path.

Why This Is a Bug

The application's default UI creates an invalid FFmpeg argument automatically. A standard user workflow can fail without any malformed input.

ASSIGN TO ME UNDER GSSOC2026 /ASSIGN/GSSOC2026

[github-actions]

👋 Thanks for opening an issue, @Krishnx21!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[Randomlyclueless]

/assign GSSOC 2026

[github-actions]

Hey @Randomlyclueless, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.