[ Next.js ] - 폰트 적용하는 법 (next/font)

폰트 적용하는 법 (next/font)

* next13 버전 기준

nextjs에서 프로젝트에 폰트를 적용하기 위해서는 next/font를 이용하는데, next/font는 모든 폰트 파일에 대해 자동으로 자체 호스팅 기능을 내장하고 있다. 자체 호스팅 기능을 제공한다는 것은 어플리케이션에서 사용되는 폰트 파일을 서버에 업로드하고, 해당 서버에서 자체적으로 폰트를 제공한다는 것을 의미한다. 이를 통해 본래 사용자가 웹 사이트를 방문할 때마다 폰트 파일을 외부 네트워크를 통해 다운로드하여 가져와 렌더링하던 과정을 생략할 수 있게 된다, 서버에서 자체적으로 호스팅된 폰트를 이용함으로써 폰트 파일을 최적으로 로드하는 것이 가능하고, 폰트를 불러오기 위해 외부 네트워크에 요청할 필요가 사라지기 때문에, 웹사이트의 성능과 보안상의 이점을 갖게 된다. 

즉 next/font는 폰트를 서버에 자체적으로 호스팅함으로써 외부 네트워크 요청을 제거하여 더욱 나은 성능과 보안상의 이점을 가진다.

---

1) next/font를 통한 이점

• 외부에 호출할 필요 없이 자체적으로 내장된 폰트 파일을 사용하기 때문에, 로드 시간을 줄여준다.
• CDN(Content Delivery Network)을 통해 클꼴을 전 세계의 서버에 분산하여 지리적으로 떨어져있는 사이트 이용자의 경우에도 폰트 파일을 불러오는데 유리하다.
• 서버 자체에 폰트 파일을 가지고 있기 때문에 크로스 브라우징 경험을 제공할 수 있다.
• 외부 서버에 대한 요청을 제거하기 때문에 보안 상의 이점을 제공하여 준다.

2) 적용 방법

next/font에는 기본적으로 구글 폰트인 next/font/google과 로컬 폰트인 next/font/local이 존재한다.

next/font/google

위와 같이 적용할 수 있다.  * 구글 폰트 https://fonts.google.com/variablefonts

위와 같이 적용할 경우 한 가지 폰트만 전역적으로 적용되게 하는데, 태그벼롤 다르게 폰트를 적용하려는 경우에는 아래와 같이 적용할 수 있다.

적용하려는 폰트의 변수를 넣어준 후, 아래와 같이 global.css 파일에서 아래와 같이 설정해주면 된다.

이와 같이 설정해준 경우, p태그의 경우 폰트는 Roboto 폰트가 적용되며, h1태그의 폰트의 경우에는 PublicSans의 폰트가 적용된다.

 

출처

https://nextjs.org/docs/app/building-your-application/optimizing/fonts#local-fonts