[Next.js 14] OTF 로컬 폰트 적용하기

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

저작자표시

티스토리툴바