Font Optimization

next/font 모듈은 폰트를 자동으로 최적화하고 외부 네트워크 요청을 제거하여 개인 정보 보호와 성능을 향상시킨다.

이 모듈은 모든 폰트 파일에 대해 자체 호스팅 기능을 내장하고 있다.

이는 웹 폰트를 레이아웃 이동 없이 최적의 상태로 로드할 수 있음을 의미한다.

next/font 사용을 시작하려면, next/font/local 또는 next/font/google 에서 이를 import 하고, 적적한 옵션을 넣어 함수로 호출한 후에 폰트를 적용하려는 요소의 className을 설정하면 된다.

app/layout.tsx

import { Geist } from 'next/font/google'
 
const geist = Geist({
  subsets: ['latin'], // 폰트 서브셋 지정
})
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={geist.className}> // className을 통해 폰트 적용
      <body>{children}</body>
    </html>
  )
}

폰트는 기본적으로 사용된 컴포넌트로 범위가 지정된다.

폰트를 전체 애플리케이션에 적용하려면 위 예시와 같이 루트 레이아웃에 추가해야 한다.

1. 구글 폰트 (Google Fonts)

어떤 구글 폰트라도 자동으로 자체 호스팅할 수 있다.

폰트는 정적 asset으로 저장되어 배포 환경과 동일한 도메인에서 제공된다.

이는 사용자가 사이트를 방문했을 때 브라우저가 구글로 어떠한 요청을 보내지 않음을 의미한다.

구글 폰트를 사용하려면 선택한 폰트를 next/font/google 에서 import하자.

app/layout.tsx

import { Geist } from 'next/font/google'
 
const geist = Geist({
  subsets: ['latin'],
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

최고의 성능과 유연성을 위해 가변 폰트 사용을 권장한다.

하지만 가변 폰트를 사용할 수 없는 경우, 다음과 같이 weight를 지정해줘야 한다.

app/layout.tsx

import { Roboto } from 'next/font/google' // Roboto 폰트 임포트
 
const roboto = Roboto({
  weight: '400', // 사용할 폰트 두께(weight) 지정
  subsets: ['latin'],
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}