📙 로컬 파일로 Nextjs 폰트 적용하는 기본적인 방법
로컬파일(.ttf, .woff, …)을 Nextjs 폰트로 적용하기 위해서는 기본적으로 아래의 방법을 사용한다.
🟡 app/layout.tsx에 next/font 를 사용하여 변수를 선언하고, className에 전달
// app/layout.tsx
import localFont from "next/font/local";
const suit = localFont({
src: "../../public/fonts/SUIT-Regular.ttf",
display: "swap",
variable: "--font-suit",
});
const suitBold = localFont({
src: "../../public/fonts/SUIT-Bold.ttf",
display: "swap",
variable: "--font-suit-bold",
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko" className={suit.className}>
<body className={suitBold.variable}>{children}</body>
</html>
);기본 폰트로는 SUIT-Regular체를, 가변적으로 Bold체를 사용하기 위해 body 부분에만 variable을 적용하였다.
🟡 폰트를 사용하기 위해 taliwindCSS에 css variable을 등록
// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
// css variable 등록
fontFamily: {
suit: ["var(--font-suit)"],
suitBold: ["var(--font-suit-bold)"],
},
},
},
plugins: [],
};
export default config;코드에서 tailwindCSS를 사용하여 className에 폰트를 적용하기 위해서 tailwind config 파일에 css variable을 등록한다.
🟡 폰트 적용
export default function Home() {
return (
<div>
<h1>home</h1>
<h1 className="font-suitBold">home</h1>
</div>
);
}
개발자 도구로 확인해보면 기본 폰트로는 suit가, 따로 className을 적용한 폰트에는 suitBold가 적용된 것을 확인할 수 있다.
export default function Home() {
return (
<div>
<h1>home</h1>
<h1 className="font-bold">home (tailwindCSS 적용)</h1>
<h1 className="font-suitBold">home (SUIT-Bold체 적용)</h1>
</div>
);
}물론 tailwindCSS를 사용하여 기본 font-weight를 조정해줄 수도 있지만, 그렇게 된다면 기본 SUIT-Regular 체에서 굵기가 조정된 정도로 폰트가 적용되어 기존 SUIT 볼드체와는 다르게 적용되는 것을 확인할 수 있다.
📙 단일 글꼴 패밀리에 여러 파일 사용하기
내가 적용한 SUIT 폰트의 경우 'SUIT' 라는 하나의 폰트에 Regular, Bold를 적용하고 있다. NextJS에서는 이러한 경우 src 배열을 활용할 수 있다고 설명하고 있다.
🟡 layout.tsx
// app/layout.tsx
import localFont from "next/font/local";
const suit = localFont({
src: [
{
path: "../../public/fonts/SUIT-Regular.ttf",
weight: "400",
style: "normal",
},
{
path: "../../public/fonts/SUIT-Bold.ttf",
weight: "700",
style: "bold",
},
],
display: "swap",
variable: "--font-suit",
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko" className={suit.className}>
<body>{children}</body>
</html>
);
}src 배열을 사용하여 여러개의 경로를 지정한다.
🟡 tailwindCSS에 적용
// tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
// fontFamily 수정
fontFamily: {
suit: ["var(--font-suit)"],
},
},
},
plugins: [],
};
export default config;이제 fontFamily에 하나의 폰트만 적용하여도 된다🎉
🟡 폰트 적용
export default function Home() {
return (
<div>
<h1>home</h1>
<h1 className="font-bold">home</h1>
</div>
);
}여기서 제일 헤메던 부분이었는데 'src 배열을 사용하긴 했는데 어떻게 폰트를 적용하지?' 라는 생각이 들었다..
고민하다가 tailwindCSS를 사용하여 `font-bold` class를 적용하여도 기존 SUIT-Regular체에 굵기가 변경된 스타일이 아닌, SUIT-Bold체가 잘 적용되는 것을 확인할 수 있다.
📙 정리
NextJS에서 로컬 파일을 통해 폰트를 적용하는 방법
1. next/font의 localFont를 가져와 로컬 폰트 변수를 만들어주고, class에 적용시킨다.
2. TailwindCSS의 css variable로 만들어 코드에서 적용한다.
3. 단일 폰트의 여러 스타일을 사용하고 싶다면 src 배열을 사용한다. 이때 기존 폰트의 굵기를 CSS로 변경시키는 것과는 다르니 주의하기 !
처음에는 기본적인 방법을 적용하다가 NextJS 공식문서를 보니 코드를 더 간단히 만들고, 사용할 때도 bold체의 변수를 기억하지 않아도 되서 편리한 방법이라고 생각해서 후자의 방법으로 코드를 수정했다.
다만, 교체하는 과정에서 src 배열에 정의는 해주었는데 어떻게 적용하면 좋을지 찾을 수가 없어 헤메다가, TailwindCSS를 적용하면 되는 것을 발견하여 블로그에 정리하게 되었다 😀 다음에도 똑같은 곳에서 헤메지 말자 !
'WEB > NextJS' 카테고리의 다른 글
| [NextJS] NextJS 14버전 Parallel Routes로 만든 모달에서 페이지 이동 시 모달이 닫히지 않는 이슈 (0) | 2025.01.22 |
|---|
