Can't resolve custom fonts when deploying at Vercel

[joaopedrocoelho]

I'm trying to add this feature to my Next.js personal website, it works fine in development and local builds, but when deploying to Vercel I'm getting this build error regarding custom fonts :

I'm using these versions in my package.json: "@vercel/og": "^0.0.20", "next": "^12.3.1"

and this is my og.tsx code :

import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

const font = fetch(
  new URL("../../public/fonts/P5Font.TTF", import.meta.url)
).then((res) => res.arrayBuffer());

const icons = fetch(
  new URL("../../public/fonts/github_events_icons.TTF", import.meta.url)
).then((res) => res.arrayBuffer());

function convertUnicode(input) {
  return String.fromCodePoint(parseInt(input.replace(/&#x|;/g, ""), 16));
}

export default async function handler(req) {
  const fontData = await font;
  const iconData = await icons;
  const { searchParams } = new URL(req.url);
  const title = searchParams.get("title") ?? "Pedro Coelho";
  const emoji = searchParams.get("emoji");

  const iconsArray = [
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
    "",
  ];
  const randomIcon = iconsArray[Math.floor(Math.random() * iconsArray.length)];

  const renderIcon = convertUnicode(randomIcon);

  return new ImageResponse(
    (
      <div
        style={{
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: "rgb(248, 248, 255)",
          position: "relative",

        }}
      >
        <span
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            color: "hsl(97, 74%, 47%)",
            opacity: "0.4",
            fontSize: "500px",
            fontFamily: "github_events_icons",
          }}
        >
          {renderIcon}
        </span>
        {emoji && (
          <span
            style={{
              fontSize: "100px",
              letterSpacing:"10px",
              fontFamily: "NotoColorEmoji",
              textAlign: "center",
              margin:'0 auto 20px auto',
              color: 'red'
            }}
          >
            {emoji}
          </span>
        )}
        <div
          style={{
            display: "flex",
            placeItems: "center",
            margin:'0 auto 2% auto',
            width: "70%",
            paddingBottom: "30px",
            borderBottom: "25px solid #8c91f2",
            fontFamily: "P5 Font",
            fontWeight: "bold",
            fontSize: `${emoji ? "70px" : "80px"}`,
            color: "rgb(18, 25, 90)",

          }}
        >
          <span
            style={{
              margin:'0 auto',
              textAlign: "center",
            }}
          >{title}</span>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: "P5 Font",
          data: fontData,
          style: "normal",
        },
        {
          name: "github_events_icons",
          data: iconData,
          style: "normal",
        }
      ],
    }
  );
}

anyway to solve this?

[joaopedrocoelho]

I've fixed it by changing the .TTF to lowercase