Next.js+TailwindにGoogleフォントを追加する

完成コード

styles/globals.css

@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      // フォントを追加
      fontFamily: {
        reggae: ['Reggae One'],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

about.jsx

import React from 'react'

const About = () => {
  return (
    <>
      <div className="font-reggae">
        About Page.
      </div>
    </>
  )
}

export default About

解説

Tailwind CSSのフォント設定をカスタマイズします。

Googleフォントにアクセスし、任意のフォントの@importを取得します。

Next.jsのglobals.cssに@importを追加します。

styles/globals.css

@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');

tailwindにフォント設定を追加します。

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      // フォントを追加
      fontFamily: {
        reggae: ['Reggae One'],
      },
  // ...

tailwindの書式でフォントを適用します。

<div className="font-reggae">
  About Page.
</div>

フォントが無事適用されました。

参考

• https://tailwindcss.com/docs/configuration
• https://nextjs.org/docs/basic-features/built-in-css-support