Next.js Discord

Discord Forum

Vercel OG custom font ERR_INVALID_URL

Unanswered
Oriental chestnut gall wasp posted this in #help-forum
Open in Discord
Oriental chestnut gall waspOP
When I'm trying to use a custom font within my Vercel OG api route, I get "ERR_INVALID_URL", pointing out, that the fonts isn't available under the /next/static/media directory. I have used multiple font files, but didn't went further. I kinda need a nodejs runtime within my route, because I am reading from .mdx files to contain blog post informations.

```ts
export async function GET(
,
{ params: { slug } }: { params: { slug: string } }
) {
const GeistMono = await fetch(
new URL('../../../../public/fonts/Geist-Bold.otf', import.meta.url)
).then((res) => res.arrayBuffer());

const page = getPage<WritingMetadata>(writings/${slug});

if (!page) {
return notFound();
}

const {
metadata: { title, description },
} = page;

return new ImageResponse(
(
<div
style={{
fontSize: 40,
color: 'black',
background: 'white',
width: '100%',
height: '100%',
padding: '50px 200px',
display: 'flex',
flexDirection: 'column',
gap: 20,
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
}}
>
{title}
<br />
{description}
</div>
),
{
width: 1200,
height: 630,
fonts: [
{
name: 'Geist',
data: GeistMono,
style: 'normal',
},
],
}
);
}
```
www:dev:  ⨯ TypeError: Failed to parse URL from /_next/static/media/RobotoCondensed-Bold.821a4140.ttf
www:dev:     at node:internal/deps/undici/undici:12344:11 {
www:dev:   [cause]: TypeError: Invalid URL
...
www:dev:     code: 'ERR_INVALID_URL',
www:dev:     input: '/_next/static/media/RobotoCondensed-Bold.821a4140.ttf'

0 Replies