Vercel OG custom font ERR_INVALID_URL
Unanswered
Oriental chestnut gall wasp posted this in #help-forum
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>(
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',
},
],
}
);
}
```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'