ServerSideでOG画像生成する際のCanvasでGoogle Fonts等を読み込む

こんな感じ

https://sarutabiko.com/user/@sarutabiko

OG画像を自動生成したいなぁって時に、
表示する箇所ごとにGoogleFontなどの文字列のフォントを変えたい時の実装メモ.

手順

Fontをダウンロードして、適切なフォルダに置く

今回は"assets/fonts"フォルダ.

Font読み込む実装

path.resolveでフォントを取得して、registerFontを使って文字列を登録.

registerFontしたものを後程のfontで指定するだけ

    import path from "path";
    import { createCanvas, registerFont } from "canvas";

必要なimportは上記のみ.

下記をog生成時に実装.

    const current = process.cwd();

    const aFont = path.resolve(
      current,
      "assets/fonts/使いたいフォント.ttf"
    );
    registerFont(aFont, { family: "使うフォントの名称" });
    
    const canvas = createCanvas(1200, 630);
    const ctx = canvas.getContext("2d");

    ctx.font = '36px "使うフォントの名称"';
    
    //描かれる文字列
    ctx.fillText("テストの文字列", 100, 100);