NuxtでGoogle Fontsを使う方法

ポートフォリオサイトでGoogle Fontsを使用した時の備忘録。
簡単に導入できるnuxt-webfontloaderを使用してGoogle Fontsを使う方法を紹介します。

インストール

yarn add nuxt-webfontloader

nuxt.config.jsへの設定1

nuxt.config.js

  modules: [
    'nuxt-webfontloader'
  ],

Google Fontsで使用したいフォントを探す

・使用したいフォントのスタイルを選択します。
今回はLatoのRegular 400とBold 700 Italicで試します。

・黒太文字の部分（Lato:400,700i）をコピー
※font-displayを設定する場合はLato:400,700i&display=swapまでをコピー

nuxt.config.jsへの設定2

nuxt.config.js

  modules: [
    'nuxt-webfontloader'
  ],
  //　↓↓追加↓↓
  webfontloader: {
    google: {
      families: ['Lato:400,700i']
    }
  },

family-fontに設定

hoge.css

/*Lato:400を設定する場合*/
.lato-400 {
 font-family: 'Lato', sans-serif;
 font-weight: 400;
}

/*Lato:700iを設定する場合*/
.lato-700i {
 font-family: 'Lato', sans-serif;
 font-weight: 700;
 font-style: italic;
}