NuxtでGoogle Fontsを利用する（日本語対応）

Contents

nuxt-webfontloaderを利用する方法
headで設定する方法
CSSでimportする方法
最後に

nuxt-webfontloaderを利用する方法

まずは一番おすすめ。nuxt-webfontloaderを利用する方法です。もちろん和文フォントもOKです。

nuxt-webfontloaderをインストールする

まずはライブラリをインストールします。

$ yarn add nuxt-webfontloader
// or
$ npm install nuxt-webfontloader

nuxt.config.jsでライブラリを読み込む

インストールが完了したらmodulesセクションにnuxt-webfontloaderを読み込みます。

  modules: [
    'nuxt-webfontloader'
  ],

使用するフォントを設定＆表示

たとえばこのようなNoto Sans JPの埋め込みコードがあるとしたらfamily=Noto+Sans+JP:wght@400;700の部分からフォント名とウェイトを抜き出して設定してあげましょう。

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

modulesセクションの下あたりにwebfontloaderの設定を追加して設定します。

  webfontloader: {
    google: {
      families: ['Lato:400,700', 'Noto+Sans+JP:400,700'] 
    }
  },

あとはお好きなところのCSSでfont-familyを設定すればOKです！

p {
  font-family: 'Noto Sans JP', sans-serif;
}

headで設定する方法

nuxt-webfontloaderを使用しないパターンで、こちらはみなさんお馴染みのheadにリンクを埋め込む方法です。
ページ個別で読み込ませたいとかがあればこちらでも良いかもしれませんね。

headに書く

headセクションでlinkの部分に配列で入れていきます。

サイト全体で使いたいときはnuxt.config.jsに設定し、個別のページで読み込ませたいときは該当のページのscript内でheadを呼び出します。
以下はindex.vueに書いた例です。

<template>
  <div>
    <p>テキスト</p>
  </div>
</template>

<script>
export default {
  head: {
    link: [
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
      },
      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap',
      },
    ],
  },
}
</script>

フォントの適用

あとはいつも通りCSSで設定してあげればOKです。

p {
  font-family: 'Noto Sans JP', sans-serif;
}

CSSでimportする方法

メリットはあるのかは置いといて、Google Fontsを使用するための別の方法として紹介します。
こちらはCSSでimportして完結するパターンですね。

<template>
  <div>
    <p>テキスト</p>
  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');

p {
  font-family: 'Space Grotesk', 'Sawarabi Mincho', serif;
}
</style>

ちなみに和文フォントは重いので読み込みの負荷軽減のためにもフォント別に読み込ませるのがいいのではないでしょうか。

最後に

google Fontsはやはり無料というだけあって人気なのでいろんな方が紹介してくれていますね！
特にnuxt-webfontloaderとかはメンテとかもしやすくて良いのではと思います。