기본적으로 구글 폰트를 사용하려면 구글 폰트 api에 연결하면 된다.
Selection Embed Code - Google Fonts
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
여기에 들어가서 원하는 폰트를 연결하면 된다.
.nanum-gothic-regular {
font-family: "Nanum Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
보통 이런 식으로 작성하라고 주어진다.
하지만, Next.js에서는 폰트 작성 방법이 다른다.
Tailwind CSS v4는 CSS 변수 기반으로 작동한다.
그래서 --font-sans라는 표준 변수에 폰트 이름을 등록해두면 Tailwind가 자동으로 font-sans라는 유틸리티 클래스를 생성한다.
HTML에서 className="font-sans" 한 줄로 모든 설정을 끝낼 수 있다.
이때, Next.js는 폰트를 다운로드해서 서버에 저장해야 한다.
layout.tsx
const inter = Inter({
subsets: ["latin"],
variable: "--font-sans" // 여기서 폰트 데이터를 이 변수에 담겠다고 선언!
});
globals.css
@theme {
--font-sans: var(--font-sans); /* Next.js가 만든 변수를 Tailwind 테마로 연결 */
}
이렇게 작성하면 Next.js에서 다운한 폰트 데이터를 layout.tsx에서 설정한 variable 변수에 담고,
해당 variable 변수를 가지고 있는 globals.css에 연결한다.
이렇게 하면 쉽게 폰트를 설정할 수 있다.
--font-sans: "Inter", ui-sans-serif, system-ui;
"Inter" 뒤에 ui-sans-serif, system-ui 가 있다.
이것들은 만약 Inter 글꼴이 없을 때, 나올 수 있는 대비 글꼴이다.
보통 시스템 내부에 내재되어 있어서
모바일이나 웹 등 어느 시스템에서도 글꼴이 안전하게 나가도록 한다.
layout.tsx
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className={`${inter.variable} ${firaCode.variable}`}>
<body>
{children}
</body>
</html>
);
}
글꼴을 적용하기 위해서 html의 className에 설정한 글꼴을 넣는다.
여러 개일 때는 {}로 감싸고 `${글꼴}` 형식으로 연달아 넣는다.