@vercel/ogで制限を回避しつつカスタムフォントをOGP画像を生成する

@vercel/ogで制限を回避しつつカスタムフォントをOGP画像を生成する

@vercel/ogで制限を回避しつつカスタムフォントをOGP画像を生成することができたのでメモ

hobbyプランでは@vercel/ogは1MBまでという制限があります。なのでそのままttfファイルを読み込んだ時、以下のような制限超過というようなエラーが出る。フォントファイルをサブセット化したとしてもサイズがまだまだ超過する。

The Edge Function "api/og" size is 5.18 MB and your plan size limit is 1 MB.

解決策

Google Fontsからフォント部分を抜き出してfetchするとこの制限が回避できるらしい。ちなみにclassNameをtwに変えるとTailwindCSSを使用できる

Satoriにあったコード

fetch-font.tsx

export async function fetchFont(): Promise<ArrayBuffer | null> {
  const googleFontsUrl = `https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@700&display=swap`;

  const css = await (
      await fetch(googleFontsUrl, {
          headers: {
              "User-Agent":
                  "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1",
          },
      })
  ).text();

  const resource = css.match(
      /src: url\((.+)\) format\('(opentype|truetype)'\)/
  );

  if (!resource) return null;
  const res = await fetch(resource[1]);
  return res.arrayBuffer();
}

/api/og.tsx

export default async function handler() {
  const font = await fetchFont();

  return new ImageResponse(
    (
      <div
        tw="w-full h-full"
        style={{
          fontFamily: 'Mincho'
        }}
        >
        {/**
          * JSXなどなど
          */}
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: "Mincho",
          data: font!,
          weight: 700,
          style: "normal"
        }
      ]
    },
  );
}

参考

最後に

間違っていること、もっといい方法があればコメントに書いていただけると幸いです。
よろしくお願いいたします。