【Nuxt.js】Google Fontsの導入方法

nuxt-webfontloaderをダウンロードする

ターミナル

$ npm i nuxt-webfontloader

nuxt.config.jsで設定

nuxt.config.js

//------省略
  modules: [
    'nuxt-webfontloader'
  ],
  webfontloader: {
    google: {
      families: ['Langar', 'Lobster']
    }
  },
//------省略

Fontを使用する

index.vue

<template>
  <div>
    <h1 style="font-family: 'Langar';">ABCDEF</h1>
    <h1 style="font-family: 'Lobster';">ABCDEF</h1>
    <h1>ABCDEF</h1>
  </div>
</template>