기타/WEB

[Next.js] Next.js 13 font 적용

hu6r1s 2023. 6. 10. 20:36

Next.js를 찍먹해보면서 알게 된 font 적용

Next.js를 이제 사용해봐서 이전 버전이 어떻게 되어 있는지는 모르겠지만 지금까지 구글 font cdn을 통해 css를 적용했었다. Next.js 13버전을 보니 훨씬 더 간편하게 사용할 수 있는 것 같아 적어본다.

자동 호스팅

브라우저에서 따로 Google에 요청을 보내지 않는다고 한다. 그러면서 성능 측에서 향상되었다.

모든 Google 글꼴을 자동으로 자체 호스팅합니다.

next/font/google 함수로 사용하려는 글꼴을 가져와서 시작하면 된다.

사용법

import { Nunito } from 'next/font/google'	// nunito 폰트 가져오기

const font = Nunito({
  subsets: ["latin"]
})

<html lang="en">
      <body className={font.className}>{children}</body>
    </html>

이렇게 하면 폰트가 적용된 것을 확인할 수 있다.