Nuxt.jsでGoogle Fontsを使う

nuxt.jsで作ったサイトにGoogle Fontsを使いたかった。
URL指定で個別に読み込む方法もあるが、今回はnuxt-webfontloaderを使った。

環境

Mojave 10.14.3（18D109）
node.js v10.11.0
yarn 1.10.1

手順

1. nuxt.jsでプロジェクト作成

$ yarn create nuxt-app プロジェクト名

2. nuxt-webfontloaderをインストール

$ yarn add nuxt-webfontloader

3. nuxt.config.jsを編集

nuxt.config.js

module.exports = {
// 省略
modules: [['nuxt-webfontloader']],
webfontloader: {
  google: {
    families: ['Josefin+Sans']
  }
},
// 省略
}

4. 導入したフォントを使ってみる

pages/index.vue

<template lang="pug">
  section
    h1 ABCDEFGHIJKLMNOPQRSTUVWXYZ
    h1 abcdefghijklmnopqrstuvwxyz
    h1 1234567890
</template>

<style lang="scss" scoped>
h1 {
  font-family: 'Josefin Sans', sans-serif;
}
</style>

$ yarn dev

localhost:3000にアクセス。