Next.js 14 프로젝트에 .otf 리디바탕 폰트를 추가해 보자!
public/fonts 디렉토리에 폰트 파일을 추가했다.
import localFont from "next/font/local";
const ridiBatang = localFont({
src: "../../public/fonts/RIDIBatang.otf",
display: "swap",
});src/app/layout.tsx에서 localFont를 import하고 올바른 경로에서 폰트 파일을 불러온다.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={ridiBatang.className}>
<main className="flex flex-col items-center p-20">{children}</main>
</body>
</html>
);
}
RootLayout에서 ridiBatang.classname을 지정한다.
Optimizing: Fonts | Next.js
Optimize your application's web fonts with the built-in `next/font` loaders.
nextjs.org