NuxtでGoogle Fontsを使う

webフォントはやっぱり便利！📝

Nuxt.jsでGoogle Fontsを使う方法を記載します。

nuxt-webfontloader というパッケージを使う事でとても簡単に導入出来るため、 こちらのパッケージを利用します。

nuxt-webfontloaderの公式ページを見ると

Nuxt 2 (and only Nuxt 2) support

Developmint/nuxt-webfontloader: Efficient web font loading has never been easier! より引用

と書かれているのでもし Nuxt 3 が出た時には使う時に注意すると良さそうです。

nuxt-webfontloaderを使ってGoogle Fontsを使う

まずNuxtで使うための設定をしていきます

パッケージの追加とNuxtで使うための設定

プロジェクトにパッケージを追加

$ yarn add nuxt-webfontloader

nuxt.config.jsのmodulesにインストールしたパッケージを使う事を明示

export default {
  ・・・
  modules: ['nuxt-webfontloader'],
  ・・・
}

Google Fontsのページで利用するフォントを調べる

Google Fontsのページにアクセスします Google Fonts

余談ですが日本語向けは特設ページがあるんですね Google Fonts + Japanese • Google Fonts + 日本語

ニクキュウフォント、可愛すぎるんですけど！w

Thin 100, Light300など複数のフォントのstyleがある場合利用したいstyleを選択した後、 右サイドバーにある「Embed」という項目をクリック

表示されているURLの family= の後が重要になります 以下の場合 Noto+Sans+JP:wght@100;300;400;500;700;900 の部分、ここを後で利用します

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

nuxt.config.jsにGoogle Fontsの設定をする

NotoSansJPだと適用出来たかがパッと見で分かりづらいので、 今回は以下のフォントを使ってみます。

<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">

nuxt.config.jsに webfontloader の項目を追加し設定します。

export default {
  ・・・
  modules: ['nuxt-webfontloader'],
  webfontloader: {
    google: {
      families: ['Monoton'],
    },
  },
  ・・・
}

familiesに設定するだけ。例えば上のNoto Sans JPの場合であれば、 families: ['Noto+Sans+JP:wght@100;300;400;500;700;900'], と設定します。

細かい設定の仕方は公式GitHubページが参考になります。 Developmint/nuxt-webfontloader: Efficient web font loading has never been easier!

Google Fontsを使う

あとはGoogle Fontsに書かれている font-family の指定方法を使用します。

「Monoton」の場合 ↓ のように書かれているので、

こちらを使用します。

試しに以下のような要素を用意すると無事表示出来ました！

<h1>Hello Wolrd!</h1>

h1 {
  font-family: 'Monoton', cursive;
}