Loading...

Next.js와 Tailwind CSS에서 일본어(외국어) 폰트 적용하기 | Kakao.GG

Next.js와 Tailwind CSS에서 일본어(외국어) 폰트 적용하기

KUKJIN LEE • 3개월 전 작성

Next.js와 Tailwind CSS에서 일본어 폰트를 적용하는 방법에 대한 가이드입니다. 일본어 폰트를 사용하려면 웹 폰트를 로드하거나 로컬 폰트를 사용할 수 있습니다.

Next.js 14버전↑사용 시 4번!!

1. Google Fonts로 일본어 폰트 적용하기

Google Fonts에서 원하는 일본어 폰트를 선택합니다. 예를 들어, Noto Sans JP 폰트를 사용할 수 있습니다.
@import 구문을 사용하여 CSS 파일에 추가하거나, Next.js의 글로벌 CSS 파일에 추가합니다.

/* styles/globals.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

Tailwind CSS에서 글로벌 폰트 설정을 업데이트하여 기본 폰트로 적용합니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Noto Sans JP', 'sans-serif'],
      },
    },
  },
};

2. 로컬 폰트 파일로 적용하기

public/fonts 폴더를 생성하고, 사용할 일본어 폰트 파일을 해당 폴더에 추가합니다. 예를 들어 NotoSansJP-Regular.woff2 파일을 추가합니다.
글로벌 CSS 파일에서 @font-face를 사용하여 로컬 폰트를 등록합니다.

/* styles/globals.css */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

tailwind.config.js 파일에서 폰트 패밀리를 확장하여 적용합니다.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Noto Sans JP', 'sans-serif'],
      },
    },
  },
};

3. 컴포넌트에서 Tailwind 유틸리티 클래스 사용하기

컴포넌트 파일에서 Tailwind의 font-sans 클래스를 사용하여 설정한 폰트를 적용할 수 있습니다.

export default function ExampleComponent() {
  return (
    <div className="font-sans text-lg">
      <p>こんにちは、世界！</p>
    </div>
  );
}

4. next/font로 최적화 적용

// app/layout.js 또는 _app.js
import { Noto_Sans_JP } from 'next/font/google';

const notoSansJP = Noto_Sans_JP({
  subsets: ['latin', 'japanese'],
  weight: ['400', '500', '700'],
  display: 'swap',
});

export default function RootLayout({ children }) {
  return (
    <html lang="ja" className={notoSansJP.className}>
      <body>{children}</body>
    </html>
  );
}