next/font

next/font 빌드 최적화

폰트 최적화는 파일 선언, subset, variable 설정, layout 적용 위치가 함께 맞아야 효과가 납니다.

빌드 포함

Google Fonts 자체 호스팅

Next가 필요한 Google Fonts 파일을 빌드 산출물에 포함해 브라우저의 외부 폰트 요청을 제거합니다.

파일 소유

로컬 폰트 안정 로드

프로젝트 안의 폰트 파일을 직접 지정해 외부 네트워크 변화와 라이선스 경계를 통제합니다.

문자 범위

subset 용량 절감

사용 언어와 글리프 범위를 골라 내려받는 폰트 파일 크기와 첫 렌더 비용을 줄입니다.

전역 배치

layout 폰트 적용 경로

className이나 CSS variable을 공통 레이아웃에 배치해 페이지마다 다른 폰트가 섞이지 않게 합니다.

폰트 선언

폰트 객체를 layout에서 안정적으로 적용합니다

페이지마다 중복 선언하기보다 공통 layout에 className이나 variable을 배치하면 흔들림이 줄어듭니다.

폰트 구성 연결

로컬 폰트파일 교체와 라이선스 관리가 필요한 폰트는 저장소 안의 명시적 경로로 추적합니다.
subset한글, 라틴, 아이콘 글리프를 분리해 실제 화면에 필요한 범위만 유지합니다.
layout 적용루트 layout에서 className이나 CSS variable을 적용해 페이지별 중복 선언을 막습니다.