Skip to content

fix(export): enable custom font rendering by serializing and writing font files to ffmpeg virtual filesystem (#1499)#1504

Open
AdityaNarayanPadhi wants to merge 1 commit into
magic-peach:mainfrom
AdityaNarayanPadhi:fix-font-export-1499
Open

fix(export): enable custom font rendering by serializing and writing font files to ffmpeg virtual filesystem (#1499)#1504
AdityaNarayanPadhi wants to merge 1 commit into
magic-peach:mainfrom
AdityaNarayanPadhi:fix-font-export-1499

Conversation

@AdityaNarayanPadhi
Copy link
Copy Markdown

Summary

This PR enables custom font file uploads to render correctly in exported videos by serializing and transferring font files to the FFmpeg.wasm worker filesystem at export time (#1499).

Changes

  • Lifted the useFontManager hook up from the local TextControls.tsx to useVideoEditor.ts to make custom font state globally accessible to the export pipeline.
  • Updated exportVideo in ffmpeg.ts to accept the uploaded customFonts array, serialize font files to ArrayBuffer payloads, map overlay virtual file paths, and transfer them to the worker thread.
  • Updated ffmpeg.worker.ts to write these binary font files to the virtual filesystem before executing the FFmpeg filter graph and added them to cleanupFiles for automatic cleanup after execution.
  • Corrected buildTextFilter in text-overlay.ts to only output one valid :fontfile argument in the filter string when a custom font is used, preventing filter graph syntax errors.

Verification

  • Uploading custom TTF/OTF fonts in the editor, styling text overlays with them, and exporting now successfully renders text with the custom font instead of falling back to default styling or failing exports.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 2, 2026

@AdityaNarayanPadhi is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 2, 2026

👋 Thanks for your PR, @AdityaNarayanPadhi!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 2, 2026

⚠️ PR Format Issues — @AdityaNarayanPadhi

Please fix the following before your PR can be reviewed:

  • ⚠️ No linked issue found. Add Closes #<issue-number> to your PR description.

Push new commits after fixing — this comment will update automatically.

📖 CONTRIBUTING.md

@github-actions github-actions Bot added level:intermediate Intermediate level - 35 pts type:bug Bug fix type:refactor Code refactor labels Jun 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

level:intermediate Intermediate level - 35 pts type:bug Bug fix type:refactor Code refactor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant