Fonts in Opengraph
Answered
Arinji posted this in #help-forum
ArinjiOP
How do i do damn custom fonts in Opengraph ffs, i have been on this for an hour
My Code
My fonts are in /fonts/Montserrat-Bold.ttf and /fonts/Montserrat-Medium.ttf
I dont get any errors from next until i try and view the opengraph when i get this error
```
My Code
import { ImageResponse } from "next/og";
const size = {
width: 1200,
height: 630,
};
export default async function OpenGraphUI({ name }: { name: string }) {
const imageURL = new URL("/og/bg.png", process.env.NEXT_PUBLIC_BASE_URL!);
const bold = fetch(
new URL("../../fonts/Montserrat-Bold.ttf", import.meta.url)
).then((res) => res.arrayBuffer());
const regular = fetch(
new URL("../../fonts/Montserrat-Medium.ttf", import.meta.url)
).then((res) => res.arrayBuffer());
return new ImageResponse(
(
<div
</div>
),
{
...size,
fonts: [
{
name: "Montserrat",
data: await regular,
style: "normal",
weight: 400,
},
{
name: "Montserrat",
data: await bold,
style: "normal",
weight: 700,
},
],
}
);
}My fonts are in /fonts/Montserrat-Bold.ttf and /fonts/Montserrat-Medium.ttf
I dont get any errors from next until i try and view the opengraph when i get this error
⨯ unhandledRejection: TypeError: Failed to parse URL from /_next/static/media/Montserrat-Bold.0066078b.ttf
{
code: 'ERR_INVALID_URL',
input: '/_next/static/media/Montserrat-Bold.0066078b.ttf'```
Answered by joulev
i have never used the
but for font loading specifically, i just go to cdns like https://fontsource.org/fonts/montserrat/cdn and copy the url and fetch it, it works well
fetch(..., import.meta.url) syntax for this before. since this runs on the server, i guess that won't work, but i'm not sure.but for font loading specifically, i just go to cdns like https://fontsource.org/fonts/montserrat/cdn and copy the url and fetch it, it works well
25 Replies
ArinjiOP
Bump
ArinjiOP
Bump
@Arinji How do i do damn custom fonts in Opengraph ffs, i have been on this for an hour
My Code
import { ImageResponse } from "next/og";
const size = {
width: 1200,
height: 630,
};
export default async function OpenGraphUI({ name }: { name: string }) {
const imageURL = new URL("/og/bg.png", process.env.NEXT_PUBLIC_BASE_URL!);
const bold = fetch(
new URL("../../fonts/Montserrat-Bold.ttf", import.meta.url)
).then((res) => res.arrayBuffer());
const regular = fetch(
new URL("../../fonts/Montserrat-Medium.ttf", import.meta.url)
).then((res) => res.arrayBuffer());
return new ImageResponse(
(
<div
</div>
),
{
...size,
fonts: [
{
name: "Montserrat",
data: await regular,
style: "normal",
weight: 400,
},
{
name: "Montserrat",
data: await bold,
style: "normal",
weight: 700,
},
],
}
);
}
My fonts are in /fonts/Montserrat-Bold.ttf and /fonts/Montserrat-Medium.ttf
I dont get any errors from next until i try and view the opengraph when i get this error
⨯ unhandledRejection: TypeError: Failed to parse URL from /_next/static/media/Montserrat-Bold.0066078b.ttf
{
code: 'ERR_INVALID_URL',
input: '/_next/static/media/Montserrat-Bold.0066078b.ttf'
i have never used the
but for font loading specifically, i just go to cdns like https://fontsource.org/fonts/montserrat/cdn and copy the url and fetch it, it works well
fetch(..., import.meta.url) syntax for this before. since this runs on the server, i guess that won't work, but i'm not sure.but for font loading specifically, i just go to cdns like https://fontsource.org/fonts/montserrat/cdn and copy the url and fetch it, it works well
Answer
ArinjiOP
oh wait, thats smart
@joulev i have never used the `fetch(..., import.meta.url)` syntax for this before. since this runs on the server, i guess that won't work, but i'm not sure.
but for font loading specifically, i just go to cdns like <https://fontsource.org/fonts/montserrat/cdn> and copy the url and fetch it, it works well
ArinjiOP
so no need for the new Url stuff as well right?
also would you happen to know why the Image component dosent work on opengraph?
normal img is fine, but it dont accept webp
@Arinji so no need for the new Url stuff as well right?
no need, just
fetch("https://cdn.jsdelivr.net/fontsource/fonts/montserrat@latest/latin-400-normal.woff").then(r => r.arrayBuffer())ArinjiOP
got it, thanks :D
@Arinji also would you happen to know why the Image component dosent work on opengraph?
satori doesn't support a lot of things
it doesn't run a headless browser and take a screenshot
it just renders the components natively which means there are lots of html/css features that it doesn't support
because to reach 1:1 parity with browsers is an impossible job
ArinjiOP
hmm, darn.. thanks alot tho :D
ArinjiOP
@joulev um so i just tried it, does nextjs not like woff2?
Error: Unsupported OpenType signature wOF2
import { ImageResponse } from "next/og";
const size = {
width: 1200,
height: 630,
};
export default async function OpenGraphUI({ name }: { name: string }) {
const imageURL = new URL("/og/bg.png", process.env.NEXT_PUBLIC_BASE_URL!);
const bold = fetch(
"https://cdn.jsdelivr.net/fontsource/fonts/montserrat@latest/latin-700-normal.woff2"
).then((res) => res.arrayBuffer());
const regular = fetch(
"https://cdn.jsdelivr.net/fontsource/fonts/montserrat@latest/latin-500-normal.woff"
).then((r) => r.arrayBuffer());
return new ImageResponse(
(
<div
>
<p
style={{
color: "#036FBA",
fontSize: "70px",
fontWeight: "bold",
}}
>
REVIVENODE HOSTING
</p>
<p
style={{
color: "white",
fontSize: "30px",
fontWeight: "normal",
}}
>
{name ?? "TEST"}
</p>
</div>
),
{
...size,
fonts: [
{
name: "Montserrat",
data: await regular,
style: "normal",
weight: 400,
},
{
name: "Montserrat",
data: await bold,
style: "normal",
weight: 700,
},
],
}
);
}Error: Unsupported OpenType signature wOF2
@Arinji <@484037068239142956> um so i just tried it, does nextjs not like woff2?
import { ImageResponse } from "next/og";
const size = {
width: 1200,
height: 630,
};
export default async function OpenGraphUI({ name }: { name: string }) {
const imageURL = new URL("/og/bg.png", process.env.NEXT_PUBLIC_BASE_URL!);
const bold = fetch(
"https://cdn.jsdelivr.net/fontsource/fonts/montserrat@latest/latin-700-normal.woff2"
).then((res) => res.arrayBuffer());
const regular = fetch(
"https://cdn.jsdelivr.net/fontsource/fonts/montserrat@latest/latin-500-normal.woff"
).then((r) => r.arrayBuffer());
return new ImageResponse(
(
<div
>
<p
style={{
color: "#036FBA",
fontSize: "70px",
fontWeight: "bold",
}}
>
REVIVENODE HOSTING
</p>
<p
style={{
color: "white",
fontSize: "30px",
fontWeight: "normal",
}}
>
{name ?? "TEST"}
</p>
</div>
),
{
...size,
fonts: [
{
name: "Montserrat",
data: await regular,
style: "normal",
weight: 400,
},
{
name: "Montserrat",
data: await bold,
style: "normal",
weight: 700,
},
],
}
);
}
Error: Unsupported OpenType signature wOF2
[satori does not support woff2 at the moment](https://github.com/vercel/satori#fonts)
you'll need to read the
vercel/satori documentation a lot to make og imagesit's important to be aware of satori limitations
ArinjiOP
oh, there is docs for this?
yes see link
ArinjiOP
thankyouu so much, the nextjs ones felt so lacking
wait so what is satori? the screenshot thing you mentioned before?
satori is the backend of next/og and vercel/og
it is a library that converts html/jsx to svg directly without a headless browser
ArinjiOP
got it, thanks :D