【nuxt3】google fontsを使う

この記事の環境

    "nuxt": "^3.8.0"
    "@nuxtjs/google-fonts": "^3.1.3", //今回使うモジュール

@nuxtjs/google-fontsとは？

Nuxt3でgoogle fontsを簡単に利用できるモジュールです。

公式はこちらになります。Google Fonts for Nuxt

使い方

ドキュメントのまんまですが、ざっくりご案内します。

インストール

#どれか好きなもの
npm install -D @nuxtjs/google-fonts
yarn add -D @nuxtjs/google-fonts
pnpm i -D @nuxtjs/google-fonts

nuxt.config.tsに記述

下記はM PLUS Rounded 1cを入れる例です！

export default defineNuxtConfig({
  modules: [
    ['@nuxtjs/google-fonts',{
      families:{
        'M+PLUS+Rounded+1c':true
      }
    }],
    //他の設定
}

これで読み込んでくれるようになります。簡単ですね！