Next.js 폰트 최적화 - next/font로 웹폰트 성능 개선 | 백틱

next.jsfontoptimization

Next.js 폰트 최적화 - next/font로 웹폰트 성능 개선

강경원

강경원· 2026년 2월 10일· 읽는 데 약 3분

조회 0

Next.js의 next/font는 웹폰트를 자동으로 최적화하여 레이아웃 시프트(CLS)를 방지하고 로딩 성능을 개선합니다.
Google Fonts, 로컬 폰트 모두 지원하며, 자동으로 폰트 파일을 최적화합니다.

1. Google Fonts 사용

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Google Fonts는 빌드 시 자동으로 다운로드되고 최적화됩니다.
subsets로 필요한 문자 집합만 포함할 수 있습니다.

2. 로컬 폰트 사용

import localFont from "next/font/local";

const customFont = localFont({
  src: [
    {
      path: "./fonts/CustomFont-Regular.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "./fonts/CustomFont-Bold.woff2",
      weight: "700",
      style: ,
    },
  ],
});

   () {
   ;
}

const inter = Inter({
  subsets: ["latin"],
  display: "swap", // 기본값
  // 'auto' | 'block' | 'swap' | 'fallback' | 'optional'
});

import { Roboto_Flex } from "next/font/google";

const roboto = Roboto_Flex({
  subsets: ["latin"],
  variable: "--font-roboto", // CSS 변수로 사용
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className={`${roboto.variable} font-sans`}>
      {children}
    </div>
  );
}