next/font로 글꼴을 빌드에 포함하기

외부 요청과 글꼴 교체 흔들림을 함께 줄여

next/font는 빌드할 때 글꼴을 받아 앱의 정적 자산으로 자체 호스팅해. 사용자의 브라우저가 Google에 별도 요청을 보내지 않으며, CSS size-adjust로 대체 글꼴과 실제 글꼴의 크기를 맞춰 교체 순간의 레이아웃 이동을 줄여.

Google 글꼴은 필요한 부분만 선택해

next/font/google에서 family를 import하고 사용할 subset과 weight를 골라. Tailwind나 다른 CSS에서 쓸 계획이라면 variable 이름을 지정해 CSS 변수로 노출하면 돼. 쓰지 않는 굵기까지 모두 포함하면 자체 호스팅의 전송 이점이 줄어.

로컬 파일도 같은 최적화 경로를 타

상용 또는 사용자 정의 woff2 파일은 저장소에 두고 next/font/local로 불러. 여러 weight와 style의 파일을 한 family로 묶을 수 있어.

글꼴은 미학이면서 성능 자산이야

라이선스, 문자 subset, weight 수, 첫 화면 사용 여부가 번들 크기와 CLS를 함께 결정해. “예쁜가?”뿐 아니라 실제로 어떤 문자를 얼마만큼 보내는지도 확인해.

실제 사용 문자와 weight를 기준으로 글꼴 파일을 줄이고, 제목·본문 각각의 fallback stack을 정해. 빌드 뒤 외부 Google 요청이 없고 CSS 변수와 Tailwind 토큰이 같은 family를 가리키는지 확인해. 느린 네트워크에서 교체 순간 CLS와 텍스트가 보이지 않는 시간을 함께 측정해.

자체 호스팅이 파일을 공짜로 만드는 건 아니야. 한글 전체 glyph와 여러 굵기를 포함하면 이미지보다 큰 자산이 될 수 있어. 브랜드 글꼴이 필요한 영역을 제한하거나 system font를 섞는 선택도 성능과 미학 사이의 정당한 설계야. Google과 로컬 글꼴을 필요한 subset·weight만으로 build하고 network에 외부 글꼴 요청이 없는지 확인해. 느린 3G에서 fallback과 실제 글꼴의 교체를 녹화하고 CLS를 재며, 한글 glyph가 빠지거나 파일 크기가 예상보다 커지지 않았는지도 봐. 글꼴이 실패했을 때도 글자 폭과 줄 높이가 지나치게 달라지지 않는 fallback을 골라. 브랜드 자산이 잠깐 늦는 상황보다 버튼과 제목이 움직여 사용자가 잘못 누르는 상황이 더 큰 제품 실패일 수 있어.

Code

next/font로 Google 글꼴 불러오기·tsx

import { Inter, JetBrains_Mono } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], display: 'swap' });
const mono = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' });

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

로컬 글꼴·tsx

import localFont from 'next/font/local';

const geist = localFont({
  src: [
    { path: './fonts/Geist-Regular.woff2', weight: '400' },
    { path: './fonts/Geist-Bold.woff2',    weight: '700' },
  ],
  variable: '--font-geist',
});

외부 요청과 글꼴 교체 흔들림을 함께 줄여

Google 글꼴은 필요한 부분만 선택해

로컬 파일도 같은 최적화 경로를 타

글꼴은 미학이면서 성능 자산이야

Code

External links

Exercise

Progress

댓글 0