Nuxt.jsでGoogleFontを使用する方法

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

1.パッケージをインストールする

まずは、パッケージをインストールしていきます。

#webfontを使用するためのパッケージ
$ npm install nuxt-webfontloader

2. nuxt.config.jsにモジュールを追加する

インストールがされたら、nuxt.config.jsに設定を追記していきます。

nuxt.config.js

export default {

    ...

    modules: [
        'nuxt-webfontloader'
    ],

    ...

    webfontloader: {
        google: {
            families: ['使用するフォント名', '使用するフォント名2', ...] 
        }
    }
    ...
}

3.あとはCSSに追記するのみ

最後に、フォント名をCSSに記述すれば反映されます。

example.scss

h1 {
  font-family: '使用するフォント名';
}