【Astro / OG Image対応】Dynamic OG Imageの日本語文字化け（豆腐化）を直す方法

Astro Paper環境で動的OGP画像（Dynamic OG image generation）を生成した際、タイトルなどの日本語部分が「□（豆腐）」になってしまっていませんか？

これはデフォルトで指定されているフォントが日本語に対応していないことが原因です。

今回は、Google Fontsの「Noto Sans JP」を使って、非常に手軽にこの文字化けを解消する方法をご紹介します。

変更対象のファイル

修正するファイルは以下の3つだけです。

1. astro.config.ts
2. src/pages/og.png.ts
3. src/pages/posts/[...slug]/index.png.ts

それぞれ Google Sans Code と記述されている部分を Noto Sans JP に差し替えていきます。

手順

1. astro.config.ts の修正

まずは設定ファイルで指定されているフォント名を変更します。

// astro.config.ts (63行目付近)

// 変更前
name: "Google Sans Code",

// 変更後
name: "Noto Sans JP",

2. og.png.ts の修正

サイト全体の共通OGP画像を生成するファイルを修正します。

// src/pages/og.png.ts (37行目付近)

// 変更前
fontFamily: "Google Sans Code",

// 変更後
fontFamily: "Noto Sans JP",

// src/pages/og.png.ts (148行目・154行目付近)

// 変更前
name: "Google Sans Code",

// 変更後
name: "Noto Sans JP",

3. index.png.ts の修正

// src/pages/posts/[...slug]/index.png.ts (176行目・182行目付近)

// 変更前
name: "Google Sans Code",

// 変更後
name: "Noto Sans JP",

まとめ

以上の修正を行うことで、動的に生成されるOGP画像でも日本語が正しく表示されるようになります。