next/font는 성능을 개선하고 레이아웃 시프트를 제거하기 위해 웹 폰트를 자동으로 최적화합니다. 빌드 시점에 폰트를 셀프 호스팅하고 로딩 세부 사항을 대신 처리해 줍니다.
Google 폰트 사용
tsx
{ } ;
inter = ({
: [],
: ,
});
() {
(
);
}
next/font는 성능을 개선하고 레이아웃 시프트를 제거하기 위해 웹 폰트를 자동으로 최적화합니다. 빌드 시점에 폰트를 셀프 호스팅하고 로딩 세부 사항을 대신 처리해 줍니다.
{ } ;
inter = ({
: [],
: ,
});
() {
(
);
}
import localFont from "next/font/local";
const myFont = localFont({ src: "./MyFont.woff2", display: "swap" });
폰트는 고전적인 성능 및 CLS 문제입니다: 텍스트 렌더링을 차단하는 서드파티 페치, 그리고 폰트가 로드될 때 레이아웃 점프를 일으키는 것(FOUT/FOIT). 이를 수동으로 잘하려면 @font-face, font-display, 프리로딩, 폴백 메트릭 매칭이 필요합니다.
next/font는 폰트 성능 체크리스트 전체 — 셀프 호스팅(속도 + 개인정보 보호), 서브세팅과 프리로딩(더 작고 빠름), 폴백 메트릭 매칭(레이아웃 시프트 없음) — 을 하나의 import 뒤로 자동화합니다.
까다롭고 틀리기 쉬운 최적화를 제거하며, Next.js에서 Google 폰트와 로컬 폰트를 모두 사용하는 권장 방법입니다.