NuxtでGoogle Fontsを使う

2020.10.03
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 が出た時には使う時に注意すると良さそうです。

検証した環境

1 nuxt 2.14.3
2 nuxt-webfontloader 1.1.0

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

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

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

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

$ yarn add nuxt-webfontloader

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

nuxt.config.js
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 の項目を追加し設定します。

nuxt.config.js
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;
}

おすすめ