@next/font 를 사용해서 구글 폰트 적용하기

Next.js 13 버전부터 @next/font 가 추가되었다.

CSS 의 @font-face 설정방법 외에도 @next/font를 사용하면 컴포넌트 내에서 fontFamily를 javascript로 적용할 수 있다.

 

Next 공식 문서에서는 친절히도 아래와 같이 유튜브 영상을 소개하고 있다.

 

https://www.youtube.com/watch?v=L8_98i_bMMA 

 

사용방법

npm install로 @next/font를 설치한다. create next-app을 한 경우에는 샘플에 이미 포함되어 있어 별도 설치가 필요 없다.

 

npm install @next/font

 

적용하고자 하는 page에 아래와 같이 적용할 수 있다. 아래는 공식문서에 있는 Inter 폰트 적용 예시이다.

간단히 className을 적용해주는 것만으로도 컴포넌트에 폰트를 적용할 수 있다.

 

 

// 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>
  )
}

 

자세한 정보는 아래 공식문서 참고

https://nextjs.org/docs/basic-features/font-optimization 

Basic Features: Font Optimization | Next.js

https://nextjs.org/docs/api-reference/next/font

@next/font | Next.js