API/Components/Font

김동현·2026년 3월 9일

next.js 공식문서 번역

목록 보기

66/79

안녕하세요! 프론트엔드 개발자로서 한 단계 더 도약하기 위해 Next.js 공식 문서를 파고드시는 모습, 정말 멋집니다. 프론트엔드 성능 최적화에서 '폰트'는 사용자 경험(UX)과 직결되는 아주 중요한 요소죠.

특히, 개발하신 내용을 바탕으로 기술 면접을 준비하시거나, 텍스트가 중심이 되는 서비스(예: 블로그 뷰어나 문서 번역기 같은 포트폴리오 프로젝트)를 기획 중이시라면 폰트 렌더링 최적화 경험은 면접관에게 어필하기 아주 좋은 무기가 됩니다.

딱딱한 번역투 대신, 제가 옆에서 과외해 드린다는 느낌으로 이해하기 쉽게 짚어드릴게요. 원본의 내용은 하나도 빠짐없이 번역하되, 실무에서 어떻게 쓰이는지 제 경험과 꿀팁도 팍팍 담아보겠습니다. 자, 그럼 시작해볼까요!

title: 폰트 모듈 (Font Module)
description: "내장된 next/font 로더를 사용하여 웹 폰트 로딩 최적화하기."
url: "https://nextjs.org/docs/app/api-reference/components/font"
version: 16.1.6
lastUpdated: 2026-02-27
prerequisites:

"API Reference: https://nextjs.org/docs/app/api-reference"
"Components: https://nextjs.org/docs/app/api-reference/components"

next/font 모듈은 커스텀 폰트를 포함한 모든 폰트를 자동으로 최적화해 주고, 외부 네트워크 요청을 제거하여 개인정보 보호와 성능을 동시에 향상시켜 줍니다.

이 모듈에는 모든 폰트 파일에 대한 내장된 자동 셀프 호스팅(self-hosting) 기능이 포함되어 있어요. 이게 무슨 말이냐면, 웹 폰트를 로드할 때 골칫거리인 레이아웃 이동(Layout Shift, CLS) 현상 없이 아주 최적화된 상태로 폰트를 불러올 수 있다는 뜻입니다.

💡 강사님의 꿀팁:
여기서 말하는 레이아웃 이동(CLS)이란, 폰트가 늦게 로딩되면서 기본 폰트로 보이던 텍스트가 갑자기 웹 폰트로 바뀌며 화면 전체가 '번쩍' 하거나 덜컥거리는 현상을 말해요. Next.js의 next/font는 이 현상을 방지할 수 있는 fallback(대체) 폰트 사이즈를 자동으로 계산해서 공간을 미리 잡아줍니다. 면접에서 "CLS 최적화를 어떻게 하셨나요?"라는 질문을 받았을 때 이 next/font의 동작 원리를 설명하시면 아주 좋습니다!

또한, 모든 Google Fonts를 아주 편리하게 사용할 수 있습니다. CSS와 폰트 파일들은 프로젝트를 빌드(build)할 때 다운로드되고, 다른 정적 에셋(static assets)들과 함께 여러분의 서버에 셀프 호스팅됩니다. 즉, 브라우저가 구글 서버로 별도의 폰트 요청을 보내지 않는다는 거죠.

import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

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

import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

🎥 영상으로 보기: next/font 사용법에 대해 더 자세히 알아보세요 → YouTube (6분).

레퍼런스 (Reference)

next/font에서 사용할 수 있는 속성(옵션)들입니다. 이 표를 잘 알아두면 나중에 원하는 대로 폰트를 세팅하기 편해집니다.

키 (Key)	`font/google`	`font/local`	타입 (Type)	필수 여부 (Required)
`src`		지원함	String 또는 Array of Objects	예 (Yes)
`weight`	지원함	지원함	String 또는 Array	필수/선택 (조건부)
`style`	지원함	지원함	String 또는 Array	-
`subsets`	지원함		Array of Strings	-
`axes`	지원함		Array of Strings	-
`display`	지원함	지원함	String	-
`preload`	지원함	지원함	Boolean	-
`fallback`	지원함	지원함	Array of Strings	-
`adjustFontFallback`	지원함	지원함	Boolean 또는 String	-
`variable`	지원함	지원함	String	-
`declarations`		지원함	Array of Objects	-

`src`

폰트 로더 함수가 호출되는 디렉토리를 기준으로 한 폰트 파일의 상대 경로입니다. 문자열(String)로 쓰거나, {path: string, weight?: string, style?: string} 형태의 객체 배열(Array)로 작성할 수 있습니다.

next/font/local 모듈에서 사용됩니다.

필수 (Required)

예시:

src: './fonts/my-font.woff2': app 디렉토리 안의 fonts라는 폴더에 my-font.woff2가 있는 경우.
src: [{path: './inter/Inter-Thin.ttf', weight: '100'}, {path: './inter/Inter-Regular.ttf', weight: '400'}, {path: './inter/Inter-Bold-Italic.ttf', weight: '700', style: 'italic'}]: 여러 굵기와 스타일을 하나의 폰트 패밀리로 묶을 때.
만약 폰트 로더 함수가 app/page.tsx에서 호출되었고 src: '../styles/fonts/my-font.ttf'를 사용했다면, 해당 my-font.ttf 파일은 프로젝트 루트의 styles/fonts 폴더에 있어야 합니다.

`weight`

폰트의 굵기(weight)를 설정합니다. 다음과 같은 방법으로 쓸 수 있습니다:

특정 폰트에서 지원하는 굵기 값을 문자열로 적거나, 가변 폰트(variable font)인 경우 값의 범위를 적습니다.
가변 구글 폰트가 아닌 경우, 굵기 값들의 배열로 적을 수 있습니다. (이 방식은 next/font/google에만 적용됩니다.)

next/font/google 및 next/font/local에서 사용됩니다.

사용 중인 폰트가 가변(variable) 폰트가 아닌 경우 필수입니다.

예시:

weight: '400': 단일 굵기 값을 문자열로 지정. (Inter 폰트의 경우 사용 가능한 값은 '100', '200', '300', '400', '500', '600', '700', '800', '900' 또는 'variable'이며, 기본값은 'variable'입니다.)
weight: '100 900': 가변 폰트를 위해 100부터 900 사이의 범위를 문자열로 지정.
weight: ['100','400','900']: 가변 폰트가 아닐 때 3개의 굵기를 배열로 지정.

`style`

폰트의 스타일(style)을 설정합니다:

문자열 값이며, 기본값은 'normal'입니다.
가변 구글 폰트가 아닌 경우, 스타일 값들의 배열로 지정할 수 있습니다. (next/font/google 전용)

next/font/google 및 next/font/local에서 사용됩니다.

선택 사항 (Optional)

예시:

style: 'italic': next/font/google에서 normal 또는 italic 중 하나를 문자열로 지정.
style: 'oblique': next/font/local에서는 어떤 값이든 쓸 수 있지만, 표준 폰트 스타일에서 제공하는 값을 사용해야 합니다.
style: ['italic','normal']: next/font/google에서 2개의 값을 배열로 지정.

`subsets`

문자열 배열을 통해 미리 로드(preload)하고 싶은 폰트의 서브셋(subsets) 이름들을 정의합니다. subsets로 지정된 폰트들은 preload 옵션이 true(기본값)일 때, HTML의 <head> 태그 안에 링크 프리로드(link preload) 태그로 자동 삽입됩니다.

next/font/google에서 사용됩니다.

선택 사항 (Optional)

예시:

subsets: ['latin']: latin 서브셋을 포함하는 배열.

💡 강사님의 꿀팁: 서브셋(Subset)은 전체 폰트 파일에서 특정 언어나 문자만 뽑아내어 파일 용량을 줄이는 기법이에요. 한글 폰트는 용량이 엄청 크기 때문에 서브셋 폰트 최적화가 필수적이죠. 구글 폰트 페이지에 가시면 해당 폰트가 지원하는 전체 서브셋 목록을 확인하실 수 있습니다.

`axes`

일부 가변 폰트들은 추가적인 axes(축)를 가질 수 있습니다. 파일 크기를 줄이기 위해 기본적으로는 폰트 굵기(weight)만 포함됩니다. 사용 가능한 axes 값은 폰트마다 다릅니다.

next/font/google에서 사용됩니다.

선택 사항 (Optional)

예시:

axes: ['slnt']: slnt를 추가 축으로 가지는 Inter 가변 폰트를 위해 slnt 값을 포함한 배열. 구글 가변 폰트 페이지의 필터를 이용해 wght 외에 사용 가능한 axes 값들을 찾을 수 있습니다.

`display`

폰트 display 속성을 설정합니다. 사용 가능한 문자열 값은 'auto', 'block', 'swap', 'fallback', 'optional'이며, 기본값은 'swap'입니다.

next/font/google 및 next/font/local에서 사용됩니다.

선택 사항 (Optional)

예시:

display: 'optional': 값을 optional로 지정하는 문자열.

💡 강사님의 꿀팁: 실무에서 display: 'swap'을 가장 많이 씁니다! 폰트 파일이 로딩되기 전까지 브라우저 기본 폰트로 텍스트를 먼저 보여주고(사용자가 빈 화면을 보는 걸 방지), 폰트 로딩이 끝나면 스르륵 예쁜 폰트로 바꿔주는 방식이에요. 프론트엔드 성능에서 FOUT (Flash of Unstyled Text) 전략이라고 부르기도 합니다.

`preload`

폰트를 미리 로드(preload)할지 말지 결정하는 불리언(boolean) 값입니다. 기본값은 true입니다.

next/font/google 및 next/font/local에서 사용됩니다.

선택 사항 (Optional)

예시:

preload: false

`fallback`

메인 폰트를 로드할 수 없을 때 사용할 대체 폰트입니다. 기본값은 없으며 대체 폰트 이름들의 문자열 배열로 설정합니다.

next/font/google 및 next/font/local에서 사용됩니다.

선택 사항 (Optional)

예시:

fallback: ['system-ui', 'arial']: 대체 폰트를 system-ui나 arial로 설정.

`adjustFontFallback`

next/font/google의 경우: 누적 레이아웃 이동(Cumulative Layout Shift, CLS)을 줄이기 위해 자동 대체 폰트를 사용할지 여부를 설정하는 불리언 값입니다. 기본값은 true입니다.
next/font/local의 경우: CLS를 줄이기 위해 자동 대체 폰트를 사용할지 여부를 설정하는 문자열 또는 불리언 false 값입니다. 가능한 값은 'Arial', 'Times New Roman' 또는 false입니다. 기본값은 'Arial'입니다.

next/font/google 및 next/font/local에서 사용됩니다.

선택 사항 (Optional)

예시:

adjustFontFallback: false: next/font/google에 적용.
adjustFontFallback: 'Times New Roman': next/font/local에 적용.

`variable`

CSS 변수 방식으로 스타일을 적용할 때 사용할 CSS 변수 이름을 정의하는 문자열 값입니다.

next/font/google 및 next/font/local에서 사용됩니다.

선택 사항 (Optional)

예시:

variable: '--my-font': --my-font라는 CSS 변수가 선언됩니다. Tailwind CSS와 연동할 때 아주 유용하게 쓰이는 속성입니다!

`declarations`

생성되는 @font-face를 추가적으로 정의할 수 있는 폰트 페이스 디스크립터(descriptor) 키-값 쌍의 배열입니다.

next/font/local에서 사용됩니다.

선택 사항 (Optional)

예시:

declarations: [{ prop: 'ascent-override', value: '90%' }]

예시 (Examples)

이제 실제로 어떻게 코드를 짜는지 살펴볼게요. 눈으로만 보지 마시고, 직접 프로젝트 하나 띄워두고 따라 쳐보시는 걸 강력 추천합니다!

구글 폰트 (Google Fonts)

구글 폰트를 사용하려면 next/font/google에서 함수 형태로 가져와야 합니다. 최고의 성능과 유연성을 얻으려면 가변 폰트(variable fonts) 사용을 강력히 권장합니다.

import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

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

import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

만약 가변 폰트를 사용할 수 없는 폰트라면, 반드시 굵기(weight)를 지정해 주어야 합니다.

import { Roboto } from 'next/font/google'

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

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

import { Roboto } from 'next/font/google'

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

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

배열을 사용해서 여러 개의 굵기나 스타일을 한 번에 지정할 수도 있습니다:

const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

알아두면 좋은 점 (Good to know): 단어가 여러 개인 폰트 이름은 언더스코어(_)를 사용해야 합니다. 예를 들어, Roboto Mono 폰트는 Roboto_Mono로 임포트해야 합니다.

서브셋 지정하기 (Specifying a subset)

구글 폰트는 자동으로 서브셋 최적화(subset)가 되어 있습니다. 이 덕분에 폰트 파일 크기가 줄어들고 성능이 좋아지죠. 우리는 이 서브셋 중에서 어떤 것을 미리 로드(preload)할지 정의해야 합니다. 만약 preload가 true인데 아무 서브셋도 지정하지 않으면 경고 메시지가 발생합니다.

함수 호출부에 서브셋을 추가해서 이렇게 작성하면 됩니다:

const inter = Inter({ subsets: ['latin'] })

const inter = Inter({ subsets: ['latin'] })

더 자세한 정보는 폰트 API 레퍼런스를 확인해 보세요.

여러 폰트 사용하기 (Using Multiple Fonts)

애플리케이션 안에서 여러 개의 폰트를 임포트해서 섞어 쓸 수 있습니다. 두 가지 접근 방식이 있는데요.

첫 번째 방식은 폰트를 내보내고(export), 가져와서(import), 필요한 곳에 className을 적용하는 유틸리티 함수(파일)를 만드는 것입니다. 이 방법은 해당 폰트가 렌더링될 때만 폰트가 미리 로드(preload)되도록 보장해 줍니다.

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})

import { inter } from './fonts'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { inter } from './fonts'

export default function Layout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { roboto_mono } from './fonts'

export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

import { roboto_mono } from './fonts'

export default function Page() {
  return (
    <>
      <h1 className={roboto_mono.className}>My page</h1>
    </>
  )
}

위의 예제에서는 Inter 폰트가 전역(globally)으로 적용되고, Roboto Mono 폰트는 필요할 때만 불러와서 특정 부분(여기선 <h1>)에만 적용할 수 있습니다.

또 다른 대안으로는 CSS 변수(CSS variable)를 생성해서 여러분이 선호하는 CSS 스타일링 솔루션과 결합해 사용하는 방법이 있습니다.

import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'

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

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

import { Inter, Roboto_Mono } from 'next/font/google'

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

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>My App</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}

html {
  font-family: var(--font-inter);
}

h1 {
  font-family: var(--font-roboto-mono);
}

위의 예제에서는 전체적으로 Inter 폰트가 적용되고, 애플리케이션 내의 모든 <h1> 태그들은 Roboto Mono 폰트로 스타일링됩니다.

권장 사항 (Recommendation): 폰트를 추가할 때마다 클라이언트가 다운로드해야 하는 리소스가 늘어나기 때문에, 다중 폰트 사용은 최소한으로 보수적으로 접근하시는 게 좋습니다.

로컬 폰트 (Local Fonts)

구글 폰트에 없는 나만의 폰트나 기업 전용 폰트를 써야 할 때가 있죠? 그럴 땐 next/font/local을 임포트하고 로컬 폰트 파일의 src 경로를 지정해 주면 됩니다. 이 경우에도 최고의 성능과 유연성을 위해 가급적 가변 폰트(variable fonts)를 사용하는 걸 추천합니다.

import localFont from 'next/font/local'

// Font files can be colocated inside of `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

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

import localFont from 'next/font/local'

// Font files can be colocated inside of `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

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

만약 하나의 폰트 패밀리를 구성하기 위해 여러 개의 폰트 파일(예: Regular, Bold, Italic 파일이 다 따로 있는 경우)을 사용하고 싶다면, 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',
    },
  ],
})

자세한 내용은 폰트 API 레퍼런스를 참고하세요.

Tailwind CSS와 함께 사용하기 (With Tailwind CSS)

요즘 많이 쓰시는 Tailwind CSS와도 찰떡궁합입니다. CSS 변수(CSS variables)를 사용해서 완벽하게 매끄러운 통합이 가능하거든요.

아래 예제에서는 next/font/google에서 Inter와 Roboto_Mono 폰트를 가져왔습니다. (물론 다른 구글 폰트나 로컬 폰트를 쓰셔도 똑같습니다!) variable 옵션을 사용해서 각각 inter와 roboto_mono 같은 CSS 변수 이름을 정의해 줍니다. 그러고 나서 inter.variable과 roboto_mono.variable을 적용해서 HTML 문서 안에 CSS 변수가 주입되도록 해줍니다.

알아두면 좋은 점: 취향이나 스타일링 요구 사항, 프로젝트 환경에 따라 이 변수들을 <html> 태그나 <body> 태그 어디에 넣어도 무방합니다.

import { Inter, Roboto_Mono } from 'next/font/google'

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

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

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

import { Inter, Roboto_Mono } from 'next/font/google'

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

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({ children }) {
  return (
    <html
      lang="en"
      className={`${inter.variable} ${roboto_mono.variable} antialiased`}
    >
      <body>{children}</body>
    </html>
  )
}

마지막으로, Tailwind CSS 설정 파일에 선언한 CSS 변수를 추가해 줍니다. Tailwind CSS 시작하기 가이드를 참고하시면 더 자세히 볼 수 있습니다.

@import 'tailwindcss';

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-roboto-mono);
}

Tailwind CSS v3

만약 Tailwind v3 버전을 사용하신다면 설정 파일 형태가 조금 다릅니다:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

이제 요소(element)에 font-sans와 font-mono 유틸리티 클래스를 바로 사용해서 폰트를 적용할 수 있습니다! 아주 직관적이죠?

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

스타일 적용하기 (Applying Styles)

폰트 스타일을 적용하는 방법은 크게 세 가지가 있습니다:

className
style
CSS 변수 (CSS Variables)

`className`

로드된 폰트에 대해 읽기 전용(read-only) CSS className을 반환하며, 이를 HTML 요소에 직접 전달하여 사용합니다.

<p className={inter.className}>Hello, Next.js!</p>

`style`

로드된 폰트에 대해 읽기 전용 CSS style 객체를 반환하며, 이를 HTML 요소에 전달합니다. 여기에는 폰트 패밀리 이름과 대체 폰트에 접근할 수 있는 style.fontFamily가 포함됩니다.

<p style={inter.style}>Hello World</p>

CSS 변수 (CSS Variables)

만약 외부 스타일 시트(external style sheet) 파일에서 스타일을 세팅하고 그곳에서 추가 옵션들을 관리하고 싶다면, CSS 변수 방식을 사용하는 것이 좋습니다.

폰트를 가져올 때, CSS 변수가 정의되어 있는 CSS 파일도 함께 가져오고(import), 다음과 같이 폰트 로더 객체의 variable 옵션을 설정해 줍니다.

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

폰트를 사용하려면, 스타일을 적용하고 싶은 텍스트의 부모 컨테이너 className에 폰트 로더의 variable 값을 넣어주고, 텍스트 요소 자체의 className에는 외부 CSS 파일에서 불러온 styles 속성을 넣어줍니다.

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

<main className={inter.variable}>
  <p className={styles.text}>Hello World</p>
</main>

그리고 component.module.css 파일 안에서 text 선택자(selector) 클래스를 아래처럼 정의해 줍니다.

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

위 예제를 실행하면 Hello World라는 텍스트가 Inter 폰트(및 자동 생성된 대체 폰트)와 함께 font-weight: 200, font-style: italic 스타일로 예쁘게 꾸며져서 렌더링 됩니다.

폰트 정의 파일 사용하기 (Using a font definitions file)

localFont나 구글 폰트 함수를 호출할 때마다, 그 폰트는 애플리케이션 안에서 하나의 독립된 인스턴스로 호스팅됩니다. 따라서 똑같은 폰트를 여러 군데서 사용해야 한다면, 한 곳에서 폰트를 로드해 두고 필요한 곳에서 그 폰트 객체를 가져와서(import) 쓰는 것이 훨씬 효율적입니다. 이를 위해 '폰트 정의 파일(font definitions file)'을 만듭니다.

예를 들어, app 디렉토리의 최상단에 있는 styles 폴더 안에 fonts.ts 파일을 만들어 볼까요?

그런 다음, 아래와 같이 폰트들을 정의해 줍니다:

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// define your variable fonts
const inter = Inter()
const lora = Lora()
// define 2 weights of a non-variable font
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// define a custom local font where GreatVibes-Regular.ttf is stored in the styles folder
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// define your variable fonts
const inter = Inter()
const lora = Lora()
// define 2 weights of a non-variable font
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// define a custom local font where GreatVibes-Regular.ttf is stored in the styles folder
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

이제 코드 어디에서든 이 파일에 정의해 둔 폰트들을 쏙쏙 뽑아 쓸 수 있습니다:

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Hello world using Inter font</p>
      <p style={lora.style}>Hello world using Lora font</p>
      <p className={sourceCodePro700.className}>
        Hello world using Source_Sans_3 font with weight 700
      </p>
      <p className={greatVibes.className}>My title in Great Vibes font</p>
    </div>
  )
}

💡 강사님의 꿀팁:
임포트 경로가 지저분해지는 걸 막으려면 절대 경로(Path alias)를 설정해 두는 게 진짜 편합니다. 바로 아래 내용이에요!

코드에서 폰트 정의 파일에 훨씬 깔끔하게 접근하려면, tsconfig.json이나 jsconfig.json 파일에 아래처럼 경로 별칭(path alias)을 설정해 보세요:

{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

이렇게 세팅해 두면, 깊은 폴더 안에서도 아주 깔끔하게 폰트를 불러올 수 있답니다:

import { greatVibes, sourceCodePro400 } from '@/fonts'

import { greatVibes, sourceCodePro400 } from '@/fonts'

미리 로드하기 (Preloading)

사이트 내의 특정 페이지에서 폰트 함수가 호출된다고 해서, 그 폰트가 앱 전체의 모든 라우트(경로)에 전역적으로 사용 가능해지거나 미리 로드(preload)되는 것은 아닙니다. 대신, 폰트가 사용된 파일의 유형에 따라 관련된 라우트에서만 미리 로드가 똑똑하게 이루어집니다:

단일 페이지 (unique page)에서 사용된 경우, 해당 페이지의 고유한 라우트에서만 미리 로드됩니다.
레이아웃 (layout)에서 사용된 경우, 그 레이아웃으로 감싸진 모든 하위 라우트에서 미리 로드됩니다.
최상위 루트 레이아웃 (root layout)에서 사용된 경우, 애플리케이션의 모든 라우트에서 미리 로드됩니다.

버전 변경 기록 (Version Changes)

버전 (Version)	변경 사항 (Changes)
`v13.2.0`	패키지 이름이 `@next/font`에서 `next/font`로 변경되었습니다. 이제 별도의 설치 과정이 필요하지 않습니다.
`v13.0.0`	`@next/font` 패키지가 최초로 추가되었습니다.

모든 문서의 구조적인 개요를 보려면 /docs/sitemap.md를 확인하세요.

모든 사용 가능한 문서의 색인(index)을 보려면 /docs/llms.txt를 확인하세요.

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

API/Directives/use server

다음 포스트

API/Components/Font

next.js 공식문서 번역

레퍼런스 (Reference)

`src`

`weight`

`style`

`subsets`

`axes`

`display`

`preload`

`fallback`

`adjustFontFallback`

`variable`

`declarations`

예시 (Examples)

구글 폰트 (Google Fonts)

서브셋 지정하기 (Specifying a subset)

여러 폰트 사용하기 (Using Multiple Fonts)

로컬 폰트 (Local Fonts)

Tailwind CSS와 함께 사용하기 (With Tailwind CSS)

Tailwind CSS v3

스타일 적용하기 (Applying Styles)

`className`

`style`

CSS 변수 (CSS Variables)

폰트 정의 파일 사용하기 (Using a font definitions file)

미리 로드하기 (Preloading)

버전 변경 기록 (Version Changes)

API/Directives/use server

API/Components/Form Component

0개의 댓글