Next.js Discord

Discord Forum

Fonts in Opengraph

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

Bump
Bump
Answer
oh wait, thats smart
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())
got it, thanks :D
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
hmm, darn.. thanks alot tho :D
@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
oh, there is docs for this?
yes see link
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
got it, thanks :D