Next.js Discord

Discord Forum

Fonts in Opengraph

Answered
Arinji posted this in #help-forum
Open in Discord
Avatar
ArinjiOP
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'

```
Answered by 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
View full answer

25 Replies

Avatar
ArinjiOP
Bump
Avatar
ArinjiOP
Bump
Avatar
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
Answer
Avatar
ArinjiOP
oh wait, thats smart
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
Avatar
joulev
no need, just fetch("https://cdn.jsdelivr.net/fontsource/fonts/montserrat@latest/latin-400-normal.woff").then(r => r.arrayBuffer())
Avatar
ArinjiOP
got it, thanks :D
Avatar
joulev
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
Avatar
ArinjiOP
hmm, darn.. thanks alot tho :D
Avatar
ArinjiOP
@joulev 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
Avatar
joulev
[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 images
it's important to be aware of satori limitations
Avatar
ArinjiOP
oh, there is docs for this?
Avatar
joulev
yes see link
Avatar
ArinjiOP
thankyouu so much, the nextjs ones felt so lacking
wait so what is satori? the screenshot thing you mentioned before?
Avatar
joulev
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
Avatar
ArinjiOP
got it, thanks :D