Next.js 14 버전에 폰트를 적용하는 방법

next/font는 자동 자체 호스팅이 내장되어 있습니다. 이 덕분에 기본 레이아웃의 이동없이 글꼴을 최적으로 로드할 수 있습니다.

웹 폰트 방식을 사용할 수도 있지만, 사용자의 접속 상태에 따라 폰트가 적용되지 않은 상태의 페이지가 보여지는 경우가 존재합니다. 그렇기에 아래 소개하는 방식을 사용하시길 권장합니다.

Google Fonts

next/font/google 경로에 사용할 수 있는 폰트를 담고 있습니다.

이 경우에 웹 폰트로 사용되는 것이 아니라 프레임워크에 내장되어 있는 모듈을 가지고 오는 것입니다.

모든 페이지에서 글꼴을 사용하기 위해서는 rootLayout 특수 파일에 작성하세요.

import { Roboto } from 'next/font/google'
 
// 만약 가변 폰트인 경우 font weight를 지정하지 않아도 됩니다.

If loading a variable font, you don't need to specify the font weight
const roboto = Roboto({
	// 배열을 사용해 여러 가중치 또는 스타일을 지정할 수 있습니다.
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})
 
export default function RootLayout({ children }) {
  return (
    <html lang="ko">
	    <body className={inter.className}>
				{children}
	    </body>
    </html>
  )
}

여러 단어로 구성된 글꼴 이름에는 밑줄(_)을 사용하세요. ex) Roboto_Mono.

로컬 글꼴 사용

로컬에 존재하는 글꼴 파일(otf, ttf..)을 사용하는 방식이 있습니다. 가변 글꼴(variable font) 사용을 권장합니다.

next/font/local 위치에서 localFont를 불러와 src에 폰트의 경로를 전달합니다.

import localFont from 'next/font/local'
 
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

여러 폰트 사용

여러 개의 폰트를 사용할 수 있게 하는 접근 방식에는 두 가지가 있습니다.

첫 번째 방식으로 글꼴을 모듈로 만들어 필요한 곳에서 불러와 사용하는 유틸리티 방식으로 사용하는 것입니다. 이렇게하면 글꼴이 렌더링 될때만 미리 로드됩니다.

// app/fonts.ts
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',
})

또는 CSS 변수로 선언하여 사용할 수 있습니다.

/* global.css */
html {
  font-family: var(--font-inter);
}
 
h1 {
  font-family: var(--font-roboto-mono);
}

권장: 글꼴은 클라이언트가 다운로드해야 하는 추가 리소스이므로 필요한만큼만 불러와 사용하세요.

reference

https://nextjs.org/docs/pages/building-your-application/optimizing/fonts