Nuxt.jsでGoogle Fontsを使う方法【@nuxtjs/google-fonts】

こんにちは。

今日はNuxt.jsでGoogleフォントを使う方法を紹介します。普通にlink要素やCSSの@importで読み込んでもよいのですが、せっかくNuxt.jsを利用しているのでモジュールで読み込んでみたいと思います。使うのは @nuxtjs/google-fontsです。

Googleフォントとは

Nuxt.jsでの使い方に行く前に、Googleフォントの基本的なことについても一応触れておきます。

Googleフォント（Google Fonts）はGoogleが公開しているWebフォント群で、無料で利用することができます。様々な英字フォントが用意されていますが、いくつか日本語フォントも用意されています。

日本語が利用できるフォントはこちらで、最近もいくつか新たに追加されました。

Googleフォントの特徴

商用利用可

Googleフォントはフォント自体を販売しない限り商用利用可能です。Webサイト上だけでなく、印刷物に利用したりロゴとして利用することも可能です。

HTTP/2対応で分割配信される

Webフォントはネットワークを介してフォントファイルを読み込むことになり、ファイルサイズの大きい日本語フォントの場合は特に読み込み時間が問題になります。Googleフォントは読み込みが最適化されており、1つのフォントが細かく分割されたファイルをHTTP/2の技術を使って並列に読み込みます。そのため1つのフォントをまるごと読み込むより早くページで表示することが可能です。

Googleフォントの読み込み方

Googleフォントを利用する方法は、HTMLでlink要素を使う方法と、CSSで@importを使う方法があります。

link要素で読み込む

HTMLでlink要素を用いて読み込む場合は次のように書きます。Googleが推奨している書き方です。ここではNoto Sans JPのウェイト100のものを読み込んでみます。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap" rel="stylesheet">

@importで読み込む

CSS内で読み込みたい場合は次のように書きます。

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100&display=swap');

CSS内に書く方法では読み込み順の制御などが難しくなりページ表示速度に影響してくるので、個人的にはlink要素で直接HTMLに書くほうがオススメです。

Nuxt.jsで賢く読み込みたい

というわけで本題です。Nuxt.jsを使ったWebサイトでGoogleフォントを読み込む場合、普通にlink要素を書いてもCSSで@importしてもいいのですが、全体で使うフォントの読み込みをどこのファイルに書くかなど迷ってしまいます。せっかくNuxt.jsを使っているので、モジュールで読み込みを制御してみたいと思います。

といっても別にモジュールを自作するわけではありません。もう既にGoogleフォントを簡単に読み込めるモジュールが公開されています。Googleフォントに限らずWebフォントの読み込みを最適化できるnuxt-webfontloaderというものを紹介しているページが多いですが、ここでは @nuxtjs/google-fontsというものを使いたいと思います。

@nuxtjs/google-fonts

まさにGoogleフォントを読み込むためのモジュールです。それ以外の機能は特にありません。

### 導入方法

まずパッケージをプロジェクトに追加します。

$ npm install --save-dev @nuxtjs/google-fonts

ビルドする際に使うパッケージのため、nuxt.config.jsのbuildModulesオプションにモジュールを追加します。

export default {
  ...,
  buildModules: [
    ...,
    [
      '@nuxtjs/google-fonts',
      {
        // オプションを記述する
      }
    ],
    ...
  ],
  ...
}

読み込むフォントを指定する

どのフォントを読み込むかは上の「オプションを記述する」とあるところに記述していきます。これから先のコードはオプションを記述する部分に記述すると思ってください。

読み込むフォントファミリーを指定するには、familiesプロパティを追加します。例えば当サイトパン工房では、Kosugi、Kosugi Maru、Varela、Varela Roundの4種類のフォントを利用しています。この場合次のように書きます。

families: {
  Kosugi: true,
  'Kosugi+Maru': true,
  Varela: true,
  'Varela+Round': true
},

配列ではなくオブジェクトの形式で、フォントファミリー名: trueの形で記述します。もしフォントファミリー名に空白文字を含む場合は、全体をシングルクォーテーションで囲い、空白部分には+を利用します。

ちなみにフォントウェイトを指定して読み込みたい場合は、trueの部分を数値の配列にします。具体的には次のような形です。

families: {
  Roboto: [100, 300]
},

フォント読み込みの挙動を指定する

CSSによるWebフォントの読み込みでは、font-displayプロパティを指定することができます。これは、Webフォントの読み込み中にブラウザがどのような挙動をするかを指定するものです。

よく使用される値はswapです。これは、フォントが読み込み終わるまでの間はローカルにあるフォントで代替表示し、読み込みが終わり次第指定したWebフォントに切り替えるものです。フォントが読み込まれない間でもコンテンツを読むことができるようにします。

Webフォントが読み込めなかった場合はそもそも文字を表示しないようにしたり、読み込みに時間がかかりすぎた場合は諦めてローカルフォントで表示し続けるようなオプションもあります。詳しくはMDNなどで調べてみてください。

@nuxtjs/google-fontsでfont-displayプロパティを設定するには、nuxt.config.jsの設定でdisplayプロパティを指定します。指定できる値はCSSのfont-displayプロパティと同じです。例えば次のように書きます。

families: {
  Kosugi: true
},
display: 'swap'

これでfont-display: swap;を指定したのと同じことになります。

その他、Webフォントの読み込みを最適化する各種プロパティ（link要素のprefetch、preconnect、preloadを指定するもの）もありますが、デフォルトでtrueのためここでは割愛します。他にもオプションは色々ありますので、公式Readmeドキュメントを参考にしてください。

@nuxtjs/google-fontsを使ってNuxt.jsで快適なGoogleフォント生活をお送りください。それではまた。