【Next.js v13】@next/fontをTailwindCSSで使う

参考

Next.js 公式
使用するフォントは、パフォーマンスと柔軟性のためにバリアブルフォントがおすすめ

手順

1. @next/fontをインストールする
   ※yarn create next-app --experimental-appで作成したプロジェクトであれば不要

yarn add @next/font

2. pages/_appファイルの設定
   以下はInterフォントの例

// フォントをインポートする
import { Inter } from '@next/font/google'

// サブセットとバリアブル(CSS変数)を定義する
const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

export default function MyApp({ Component, pageProps }) {
  return (
  　// CSS変数をHTMLドキュメントに追加する
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

3. tailsind.config.jsの設定

// ここの部分と
const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} \*/
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // ここの部分を追加
      fontFamily: {
        sans: ['var(--font-inter)', ...fontFamily.sans],
      },
    },
  },
  plugins: [],
}

4. yarn buildで適用される