💨

Next.js13のnext/fontを、Tailwindcss, Windicssでfont-○○のように使う

2022/12/05に公開

Next.js

Tailwind CSS

Windi CSS

tech

Next.js v13で追加されたnext/fontを、Tailwind css、Windi cssに導入してみました

Tailwind cssでnext/fontを使う

既にNext.js 13、Tailwindがセットアップ出来ている状態で進めます

もし、まだv13にアップグレードしていない方は、こちらの記事を参考にしてくれると嬉しいです！

Tailwind cssの導入は公式ドキュメントが分かりやすいです！

①next/fontをインストール

npm install @next/font
or
yarn add @next/font

②Google Fontsから、フォントを探す

ここから、フォントを探します。
ここでは、Lora, Inter, Kenia, Dancing Scriptを使います
https://fonts.google.com/

③fontを読み込む

pages/_app.tsx内で、Google Fontsを読み込みます。globalなcssでfontを定義することで、どこからでも使えるようにします。

Dancing Scriptのように、空白を含むフォントは、Dancing_Scriptを入れるので注意して下さい

keniaは、font-weightを指定しないと怒られるので、こちらのように指定します。
const kenia = Kenia({weight: '400'})

_app.tsx

import { Lora, Inter, Kenia, Dancing_Script } from '@next/font/google'
import '../styles/globals.css'
import type { AppProps } from 'next/app'

const lora = Lora()
const inter = Inter()
const dancing = Dancing_Script()
const kenia = Kenia({ weight: '400' })

export default function App({ Component, pageProps }: AppProps) {
  return (
    <div>
      <Component {...pageProps} />
      <style jsx global>
        {`
          :root {
            --font-inter: ${inter.style.fontFamily};
            --font-lora: ${lora.style.fontFamily};
            --font-kenia: ${kenia.style.fontFamily};
            --font-dancing: ${dancing.style.fontFamily};
          }
        `}
      </style>
    </div>
  )
}

④tailwind.config.jsでfontFamilyを拡張する

今回読み込んだLora, Inter, Kenia, Dancing Scriptを、Tailwind cssのfont-○○のように使うので、tailwind.config.jsのthemeからfontFamilyを拡張します

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
+      fontFamily: {
+        inter: ['var(--font-inter)'],
+        lora: ['var(--font-lora)'],
+        kenia: ['var(--font-kenia)'],
+        dancing: ['var(--font-dancing)'],
+      },
    },
  },
  plugins: [],
}

⑤classを付ける

pages/index.tsxで、こちらのようにフォントを指定してみます

font-inter, font-lora, font-kenia, font-dancingをクラスに追加することで使えます

index.tsx

export default function Home() {
  return (
    <div className='max-w-[600px] mx-auto'>
      <h1 className='text-[100px] text-red-500'>aa</h1>
      <div className='text-3xl'>
        <p className='font-inter'>font-inter: Apple123こんにちは</p>
        <p className='font-lora'>font-lora: Apple123こんにちは</p>
        <p className='font-kenia'>font-kenia: Apple123こんにちは</p>
        <p className='font-dancing'>font-dancing: Apple123こんにちは</p>
      </div>
    </div>
  )
}

⑥buildする

最後に、buildをして確認します

npm run build
npm run start
or
yarn build
yarn start

すると、フォントが適用されます！
buildしないと、フォントが効かなかったので焦ってました笑

Windi cssでnext/fontを使う

Tailwind cssの時とやっていることは同じです。
①、②、③、⑤、⑥番はそのままで、④番だけ変わります。

windi cssの導入はTailwind cssよりも簡単に導入出来ます!
記事の最後にインストール方法も書いときます

④windi.config.jsでfontFamilyを拡張する

Tailwind cssの時と同様に、windi.config.jsのthemeからfontFamilyを拡張します

windi.config.js

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['**/*.{jsx,tsx,css}'],
    exclude: ['node_modules', '.git', '.next'],
  },
  theme: {
    extend: {
+      fontFamily: {
+        inter: ['var(--font-inter)'],
+        lora: ['var(--font-lora)'],
+        kenia: ['var(--font-kenia)'],
+        dancing: ['var(--font-dancing)'],
+      },
    },
  },
})

これでnext/fontが使えるようになります！

おまけ windi cssの導入

windi cssのインストール

yarn add windicss-webpack-plugin -D
or
npm i windicss-webpack-plugin -D

next.config.jsの中身を変更する

next.config.js

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

module.exports = {
  // ...
  webpack(config) {
    config.plugins.push(new WindiCSSWebpackPlugin())
    return config
  },
}

pages/_app.tsxに以下を追加する

pages/_app.tsx

// eslintのimportエラーが出る時に、このコメントを追加
// eslint-disable-next-line import/no-unresolved
import 'windi.css'

プロジェクト直下にwindi.config.jsを作成