Mon Apr 07 2025

nuxt-og-imageで日本語フォントを指定する方法

nuxt-og-imageでOGP画像を生成したら日本語が文字化けしてしまった時の対処法を備忘録として残す。

nuxt-og-image は、OGP 画像を簡単に作成することができる Nuxt のモジュールです。

ただし、注意点として英語以外の言語に対応していません。

そのため、私のように日本語でブログの記事を執筆している場合、 OGP 画像に表示させるテキストが文字化けしてしまいます。

nuxt-og-imageによって生成されたOGP画像。日本語が文字化けしている。

対処法

公式ドキュメントの中に対処法が書いてありました。

日本語を使用する場合、以下のように nuxt.Config.ts を修正します。

export default defineNuxtConfig({
  ogImage: {
    fonts: [
      'Noto+Sans+JP:400',
    ]
  }
})

Nuxt Dev Tools で文字化けが解消されていることを確認します。

nuxt-og-imageによって生成されたOGP画像。日本語が文字化けしていない。

フォントは、${name}:${weight}　の形式で Google フォントを指定することができます。

例えば、文字を太くしたい場合は下記のように指定します。

export default defineNuxtConfig({
  ogImage: {
    fonts: [
      'Noto+Sans+JP:700', 
    ]
  }
})

nuxt-og-imageによって生成されたOGP画像。文字が太い。