fontoptimizationnext.js

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

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

✨ AI 요약

긴 글, 핵심만 먼저 — 이 글을 3줄로 정리해드려요.

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: "normal",
    },
  ],
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return <div className={customFont.className}>{children}</div>;
}

로컬 폰트 파일도 next/font/local로 최적화할 수 있습니다.

3. 폰트 디스플레이 전략

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

display: "swap": 폰트가 로드되는 동안 대체 폰트로 표시, 로드되면 교체
display: "optional": 폰트가 빠르게 로드되지 않으면 대체 폰트 유지

4. 가변 폰트(Variable Fonts)

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>
  );
}

variable 옵션으로 CSS 변수로 사용할 수 있어, Tailwind CSS와 함께 사용하기 좋습니다.

5. 성능 최적화 효과

자동 폰트 서브셋팅: 필요한 문자만 포함
자동 self-hosting: Google Fonts도 자체 호스팅하여 외부 요청 제거
레이아웃 시프트 방지: size-adjust로 CLS 최소화
프리로딩: 중요한 폰트는 자동으로 프리로드

6. 실무 팁

필요한 폰트만: 사용하지 않는 폰트는 제거하여 번들 크기 감소
가변 폰트 우선: 가능하면 가변 폰트 사용 (파일 크기 감소)
fallback 폰트: fallback 옵션으로 시스템 폰트 지정
성능 측정: Lighthouse로 폰트 로딩 성능 확인

Next.js 폰트 최적화는 "폰트 로딩이 사용자 경험을 해치지 않도록 자동으로 처리한다"는 철학을 따릅니다.
적절히 사용하면 Core Web Vitals 점수를 크게 개선할 수 있습니다.