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>

글꼴이 안전하게 적용되었습니다.

참고

h tps : // 싶다 l ぃん dcs ㎃. 코 m / 드 cs / 곤후 쿠라 치온

htps // // 네 xtjs. 오 rg / 드 cs / 바시 c 훗 아츠레 s / 부이 lt - ン - c s - 스트 rt