구글 폰트 적용하기
예를 들어서 Noto Sans KR이라는 폰트를 적용해보자.
_app.js 파일에서 적용할 것이다.@next/font/google이라는 패키지에서
Noto_Sans_KR을 임포트하고 아래처럼 객체를 만든다.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 탭을 살펴보면 구글 사이트가 아니라,
우리 사이트에서 폰트 파일을 받아 오는 걸 알 수 있다.
그래서 초기 로딩 속도가 훨씬 빨라지는 장점이 있다.
