요즘 구글 폰트를 사용한 사이트를 많이 볼 수 있는데요. 무난한 디자인에 구글에서 적용할 수 있는 코드도 제공하기 때문에 많은 곳에서 활용하고 있죠. Next.js에서는 구글 폰트를 위한 기능도 제공하는데요. 구글 폰트를 편하게 쓰는 것뿐만 아니라 여러 가지 최적화도 함께 제공합니다. 이번 레슨에서는 Next.js에서 구글 폰트를 적용하는 방법에 대해 소개해드리겠습니다.
예를 들어서 Noto Sans KR이라는 폰트를 적용해 볼게요. _app.js 파일에서 적용할 건데요. @next/font/google이라는 패키지에서 Noto_Sans_KR을 임포트하고 아래처럼 객체를 만듭니다.
/pages/_app.js
import { Noto_Sans_KR } from '@next/font/google';
const notoSansKR = Noto_Sans_KR({
weight: ['400', '700'],
subsets: [],
});weight 프로퍼티에는 사용할 폰트 굵기를 적었는데요. 굵기 400, 700을 갖는 폰트를 쓸 겁니다. 여기서 주의하실 점은 숫자(400, 700 같은 형태)가 아니라 문자열('400', '700' 같은 형태)라는 겁니다.
subsets는 빈 배열로 했는데요. 서브셋이라는 건 폰트에서 영문, 한글 이런 식으로 사용할 글자들만 골라서 사용할 때 쓰는 건데, 일단 전부 다 사용하는 걸로 했습니다. 만약에 영문만 사용하는 폰트라면 ['latin']과 같이 써 주면 됩니다.
폰트를 적용하려면 notoSansKR 객체의 className 프로퍼티를 사용할 수 있는데요. 이 클래스가 적용된 요소 안에서는 폰트를 적용하게 됩니다.
<main className={notoSansKR.className}>
...
</main>
아니면 Next.js에서 제공하는 Head 컴포넌트를 활용해서 전역 스타일로 적용할 수도 있습니다.
<Head>
<style>{`
html {
font-family: ${notoSansKR.style.fontFamily}, sans-serif;
}
`}</style>
</Head>Next.js는 어떤 최적화를 하고 있는 걸까요? 폰트를 적용하고 개발자 도구를 열어서 Network 탭의 세부 탭인 Font 탭을 살펴보면 구글 사이트가 아니라, 우리 사이트에서 폰트 파일을 받아 오는 걸 알 수 있습니다. 그래서 초기 로딩 속도가 훨씬 빨라지죠.
