[nextjs 번역] 폰트 사용하기 (How to use fonts)

원문: Getting Started: Fonts | Next.js

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

내장된 자체 호스팅(self-hosting) 기능을 제공합니다. 즉, 어떤 폰트 파일이든 최적의 방식으로 웹폰트를 로드할 수 있으며, 레이아웃 시프트(Layout Shift) 없이 사용할 수 있습니다.

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}>
      <body>{children}</body>
    </html>
  )
}

폰트는 사용된 컴포넌트 범위에만 적용됩니다. 전체 애플리케이션에 폰트를 적용하려면 루트 레이아웃(Root Layout)에 추가하세요.

Google Fonts 사용하기 (Google fonts)

Google Fonts는 자동으로 자체 호스팅됩니다. 폰트 파일은 정적 자산으로 포함되어 배포 도메인에서 제공되므로, 사용자가 사이트를 방문할 때 브라우저에서 Google로 요청을 보내지 않습니다.

Google Fonts를 사용하려면, 원하는 폰트를 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>
  )
}

최적의 성능과 유연성을 위해 가변 폰트(variable font) 사용을 권장합니다. 가변 폰트를 사용할 수 없다면, weight(굵기)를 명시해야 합니다:

// app/layout.tsx
import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

로컬 폰트 사용하기 (Local fonts)

로컬 폰트를 사용하려면, next/font/local에서 import한 후, 로컬 폰트 파일의 src를 지정하세요. 폰트 파일은 public 폴더에 저장할 수 있습니다. 예시:

// app/layout.tsx
import localFont from 'next/font/local'

const myFont = localFont({
  src: './my-font.woff2',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

하나의 폰트 패밀리에 여러 파일을 사용하려면, src를 배열로 지정할 수 있습니다:

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})