【Nuxt3】@nuxtjs/google-fontsでGoogle Fontsを使えるようにする。

Nuxt3で Google Fonts(Noto Sans Japanese) を使いたい、公式ドキュメントに設定方法があるがnpmパッケージもあるとの事で、今回はそれを使ってGoogle Fontsを設定してみた。

※npmパッケージのインストールはVS codeのターミナルを使用しています。

@nuxtjs/google-fonts

Nuxt3のプロジェクトディレクトリで以下コマンドを入力してGoogle Fonts用のパッケージをインストールします。

npm install -D @nuxtjs/google-fonts

インストールが完了したらディレクトリ直下にあるpackage.jsonに以下記述が追加されているはずです。

"@nuxtjs/google-fonts": "^3.1.3"

※バージョンは2024年3月14日時点のものです。

nuxt.config.tsの設定

次にnuxt.config.tsのmodulesに以下記述を追加します。

modules: ['@nuxtjs/google-fonts'],

使用したいフォントを設定する

最後に使用したいフォントを設定します。今回のNoto Sans Japaneseの場合は以下のように設定します。

googleFonts: {
    families: {
      'Noto+Sans+JP': '200..700' // もしくはtrueを設定する
    },
    },

「'200..700'」 は使用したいウェイトの範囲になります。
ちなみに「true」だと normal(400) と bold(700) のみ使用できるみたいです。
設定はこちらで完了。
あとは「npm run dev」コマンドを叩いて、実際のページをデベロッパーツールからNoto Sans JPを読み込まれているはずです。

まとめ

今回のnuxt.config.tsの中身は以下になります（他の設定は省略しています）。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@nuxtjs/google-fonts'],
  googleFonts: {
    families: {
      'Noto+Sans+JP': '200..700',
    },
  },
})

参考

Nuxt Google Fonts
【Nuxt】@nuxtjs/google-fontsでNoto Sans Japaneseを使う