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>
);
}