[Nuxt]Google Fontsを導入する

デフォルトのfont-familyでは寂しい、物足りない。そんな時はGoogle Fontsを導入してみましょう。なお、Nuxt.jsを使います。

インストール

npmでパッケージをインストールします。

$ npm i nuxt-webfontloader --save

そして、nuxt.config.jsを編集します。

modules: [
  'nuxt-webfontloader'
],
webfontloader: {
  google: {
    families: ['Mali', 'Kosugi', 'Ozwald']
  }
},

今回は日本語フォントのKosugiと二つの英字フォントを導入してみました。

使う

assets/commons.cssを作成します。

.mali {
  font-family: "Mali";
}

.kosugi {
  font-family: "Kosugi";
}

.oz {
  font-family: "Ozwald";
}

commons.cssがプロジェクト全体で使えるようにnuxt.config.jsをまたまた編集。

css: [
  '~/assets/commons.css'
],

これでCSSクラスとして使えるようになりました!