Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Font files not loaded on Vercel Edge Function #580

Open
jonashaefele opened this issue Dec 21, 2023 · 0 comments
Open

Custom Font files not loaded on Vercel Edge Function #580

jonashaefele opened this issue Dec 21, 2023 · 0 comments

Comments

@jonashaefele
Copy link

Bug report

Description / Observed Behavior

I'm using the Documentation at
https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-examples#using-a-custom-font
and
https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-api

I'm trying to create OG images using a custom font.

When loading a custom font, it works just fine in local development, but fails when deploying to Vercel.

The edge function errors out with Fetch API cannot load: blob:Fontfilename.68a75c1840dfdca9.otf

It seems to find the file on build, as it's crated a blob with a hash in the name, but it fails to load the font at runtime.
I tried many different versions including the app router (as in docs), the page router (as in the example repo and docs) and searched through issues here and on Stackoverflow.

Expected Behavior

I expect the example code from the example repo and the docs to run both locally with next dev as well as deploy to Vercel and correctly load the font before rendering the image.

Reproduction

Create a new deployment of the example app at https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs

https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs&project-name=vercel-og-nextjs&repository-name=vercel-og-nextjs

Deploy to Vercel.
Access /api/custom font

See 500 error trying to import font blob.

Additional Context

All the latest versions of next, vercel/og, satori.

Rendering without custom fonts (or any imported asset) runs fine. Adding custom font leads to 500 error.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant