[NextJS][Font] 폰트 적용 사용 방법

# @next/font를 활용한 Google Font 최적화 적용 방법 소개

- NextJS를 사용해서 웹 개발을 하다보면 기존의 웹 개발에서 사용하던 방법과 다르게 리소스를 더 최적화해서 적용하는 방법을 제공하는 경우가 많습니다. 본 포스팅에서는 NextJS 13부터 사용할 수 있는 폰트 최적화 방법을 소개하려고 합니다. 이에 대한 공식 문서를 참조하셔도 좋을 것 같습니다

 

 

# 적용 방법

 

- @next/font 라이브러리를 설치해 줍니다. 기본 nextjs에는 포함되어 있지 않기 때문에, 설치를 해주셔야 합니다

yarn add @next/font

 

- 사용방법은 아래와 같이 정말 간단합니다. Google Fonts에서 제공하는 폰트를 웹 폰트를 추가하는 등의 작업 없이 쉽게 적용시킬 수 있다는 점이 매력적입니다.

// pages/_app.js
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'] })

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={inter.className}>
      <Component {...pageProps} />
    </main>
  )
}

 

- 단, 주의하셔야 할 점은 구글에서 제공하는 폰트 변수에 포함되어 있는 폰트들을 사용하셔야 한다는 점입니다. 위의 링크에 있는 폰트를 사용하지 않고, 직접 로컬에 있는 폰트 파일을 포함시키시려고 하는 경우에는 아래와 같은 방법을 사용하셔야 합니다.

// pages/_app.js
import localFont from '@next/font/local'

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

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}