[BUG] buildTextFilter uses invalid FFmpeg fontweight parameter and sets fontfile to font name instead of path — bold text and custom fonts never render correctly

[abhinav-atul]

Description

The buildTextFilter function in src/lib/text-overlay.ts generates an invalid FFmpeg drawtext filter string. It contains two bugs that silently break text rendering in all video exports.

---

Bug A — invalid fontweight= parameter

fontweight= is not a valid FFmpeg drawtext option. FFmpeg silently ignores unknown parameters, so bold text is never rendered bold in any export. The correct parameter is bold=1.

Bug B — fontfile= set to font name, not file path

For any overlay with a fontFamily, the filter appends fontfile='Arial' (or whatever the sanitised name is). FFmpeg expects a filesystem path here, not a font name. This causes FFmpeg to attempt to open a file literally named Arial, which fails silently.

For custom fonts, getFFmpegFontArg then appends the real fontfile= path immediately after, producing a duplicate key in the filter string.

---

Affected File

src/lib/text-overlay.ts — lines 92–102

---

Steps to Reproduce

1. Upload any video and add a text overlay.
2. Set the font weight to Bold.
3. Export the video.
4. Open the exported file — the text will not be bold.

For custom fonts, the export may fail with an FFmpeg filter error due to the duplicate fontfile= key.

---

Current Behaviour

// Generated filter (broken)
drawtext=...:fontweight=bold:fontfile='Arial'
//             ↑ not a real FFmpeg param  ↑ name, not a file path

---

Expected Behaviour

// Correct — bold flag only when needed
drawtext=...:bold=1

// For custom fonts, append only the real file path
drawtext=...:bold=1:fontfile=/tmp/MyFont.ttf

---

Suggested Fix

• Replace :fontweight=${fontWeightParam} with :bold=1 when fontWeightParam === "bold", and omit it entirely for normal weight.
• Remove the block that appends fontfile='${safeFontName}' for system fonts. System fonts do not require a fontfile path; use the font= option for the font family name instead.
• Keep the existing fontFileParam path appended only for custom uploaded fonts.

// Before
let filter = `drawtext=...:fontweight=${fontWeightParam}`;
if (overlay.fontFamily) {
  const safeFontName = overlay.fontFamily.replace(/[^a-zA-Z0-9-]/g, "");
  filter += `:fontfile='${safeFontName}'`;          // ❌ name, not a path
}
if (fontFileParam) filter += `:${fontFileParam}`;   // ❌ duplicate fontfile key

// After
if (fontWeightParam === "bold") filter += `:bold=1`;
if (overlay.fontFamily && !fontFileParam) {
  filter += `:font='${overlay.fontFamily}'`;        // ✅ system font name
}
if (fontFileParam) filter += `:${fontFileParam}`;   // ✅ custom font path only

[github-actions]

👋 Thanks for opening an issue, @abhinav-atul!

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!

[abhinav-atul]

@magic-peach I'd like to work on this — contributing under GSSoC'26
/assign

[github-actions]

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