프로젝트에 두 가지 폰트를 적용하기 위해 next/font 용례를 찾아보는데 fontName.className을 사용하기도 하고 fontName.variable을 사용하기도 한다.
둘의 차이를 정리하면 아래와 같다.
className: 클래스명에 font-family를 직접 설정한다
variable: CSS variable에 font-family를 설정하고, 해당 CSS variable을 사용할 수 있게 한다
1. className
const moneygraphy = localFont({
src: "./font/Moneygraphy-Rounded.woff2",
display: "swap",
weight: "400",
});
...
return (
<html lang="ko" className={`${moneygraphy.className}`}>
<body>
{children}
</body>
</html>
)
이렇게 적용하면
이처럼 설정된 값을 직접 사용할 수 있는 클래스명이 생성된다.
두 개 이상의 폰트를 사용하고 싶은 경우, font 객체를 export하는 파일을 따로 만들고, 폰트를 사용하고 싶은 컴포넌트에서 import하여 사용하면 된다.
// 출처: https://nextjs.org/docs/app/building-your-application/optimizing/fonts
import { Inter, Roboto_Mono } from 'next/font/google'
export const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export const roboto_mono = Roboto_Mono({
subsets: ['latin'],
display: 'swap',
})2. variable
const pretendard = localFont({
src: "./font/PretendardVariable.woff2",
variable: '--font-pretendard',
display: "swap",
});
...
return (
<html lang="ko" className={`${pretendard.variable}`}>
<body>
{children}
</body>
</html>
)
이렇게 적용하면
이처럼 해당 요소 아래에서 --font-pretendard라는 CSS variable을 사용할 수 있게 된다.
이를 사용하는 방법은 크게 두 가지가 있다.
1) CSS에서 선언
/** 출처: https://nextjs.org/docs/app/building-your-application/optimizing/fonts */
html {
font-family: var(--font-inter);
}
h1 {
font-family: var(--font-roboto-mono);
} 2) tailwind CSS 사용
프로젝트가 tailwind를 사용하고 있는 경우, tailwind.config.ts파일에서 theme.extend 속성을 활용하여 설정할 수 있다.
export default {
theme: {
extend: {
fontFamily: {
pretendard: ['var(--font-pretendard)'],
}
}
}
이제 클래스명에 font-pretendard 를 사용하면 해당 폰트가 적용된다.
variable이라는 단어를 폰트와 함께 사용하니, 글꼴을 다양하게 변형해 사용할 수 있는 폰트라는 뜻의 'Variable Font'가 떠올라서 처음엔 의미와 용도가 좀 혼란스러웠다.
하지만 next/font의 variable은 'Variable Font'의 variable이 아니라 'CSS Variable'의 variable인 것이었다... 사이드프로젝트를 하고, Next.js 공식문서를 다시 보고 정리하며 차이를 정확히 알 수 있었다.
