✏️

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

2023/06/19に公開

はじめに

Nuxt3でGoogleフォントを使用するために@nuxtjs/google-fontsを使用しました。
その際に読み込みのフォント指定方法で詰まったのでメモです。

基本的な流れは以下公式にあるので割愛します。
https://google-fonts.nuxtjs.org/setup

以下のようにnuxt.config.jsで必要なフォントを指定します。
Robotoのように一単語なら良いのですが、複数単語のフォントファミリーは指定方法に注意です。

googleFonts: {
  families: {
    Roboto: true
  }
}

私の場合は、Noto Sans Japaneseを使いたかったのですが、
そのまま'Noto Sans Japanese'と指定しても無理です（それはそう）

ググってみるとどうやら単語は+で繋ぐらしい。
そこで'Noto+Sans+Japanese'にしてみたが動かず...

'Noto+Sans+Japanese'って書いてあるじゃん...違うの...😢
と、よくよく読み込みAPIの仕様を見てたら...

Noto Sans JPじゃん！！！！！！！！！！！！！！！！！！

というわけで結論、Noto Sans Japaneseの場合は以下のようになります。
他のフォントも同様にURL確認するようにしてください...😭

googleFonts: {
  families: {
    'Noto+Sans+JP': true
  }
}