Nuxt.jsに@nuxtjs/google-fontsを使ってGoogle Fonts（Webフォント）を設定する方法

Nuxt.jsに@nuxtjs/google-fontsを使ってGoogle Fonts（グーグルフォント）を設定する方法になります。
フォントをダウンロードして使用する方法についても解説しています。

@nuxtjs/google-fontsをインストールする

まずは、@nuxtjs/google-fontsをインストールします。

npm install --save-dev @nuxtjs/google-fonts
# OR 
yarn add --dev @nuxtjs/google-fonts 

nuxt.config.jsで設定をする

続いてnuxt.config.jsで設定を追加していきます。

nuxt.config.js

export default {
  buildModules: [
    '@nuxtjs/google-fonts' //追加
  ],
  googleFonts: {
    families: {
      Roboto: [100, 400, 500, 700] //読み込みたいGoogle　Fontsを指定
    }
  },
}

これでGoogle Fontsの設定は完了です。cssでfont-familyを設定します。

body {
   font-family: "Roboto", sans-serif;
}

Google Fonts（グーグルフォント）をダウンロードして利用する

@nuxtjs/google-fontsにはGoogleFontsをダウンロードして利用できるオプションがあります。

nuxt.config.js

export default {
  googleFonts: {
    families: {
      Roboto: [100, 400, 500, 700],
      download: true, //追加
      inject: true
    }
  },
}

nuxt.config.jsに上記のオプションを設定します。

Nuxtをビルドすると、assetsフォルダにfonts.cssとfontsが生成されます。
Google Fontsをダウンロードして使用したい場合には、かなり便利かと思います。