Next.js에서 Google Fonts를 활용하는 방법
많은 웹 사이트에서 Google Fonts를 활용하고 있습니다. Next.js는 Google Fonts를 손쉽게 사용하고 최적화할 수 있는 기능을 제공합니다.
Google Fonts 설정하기
패키지 import 및 객체 생성
// /pages/_app.js
import { Noto_Sans_KR } from '@next/font/google';
const notoSansKR = Noto_Sans_KR({
weight: ['400', '500', '700'], // 사용할 폰트 굵기 설정
});
`weight` : 폰트 굵기를 문자열 형태로 지정
폰트 적용하기
1. 클래스 이름을 사용하여 적용
생성된 폰트 객체의 `className` 속성을 활용하여 특정 요소에 폰트를 적용합니다.
<main className={notoSansKR.className}>
...
</main>
2. 전역 스타일로 적용
Next.js에서 제공하는 `Head` 컴포넌트를 사용하여 HTML 전역 스타일에 폰트를 설정할 수 있습니다.
import Head from 'next/head';
<Head>
<style>{`
html {
font-family: ${notoSansKR.style.fontFamily}, sans-serif;
}
`}</style>
</Head>
Next.js의 Google Fonts 최적화
Next.js는 Google Fonts를 사용할 때 폰트 파일을 구글 서버에서 직접 가져오는 대신, 로컬에 호스팅하여 최적화합니다.
장점
1. 초기 로딩 속도 개선
폰트를 로컬에서 불러오므로 네트워크 요청 시간이 줄어듭니다.
2. 캐싱 최적화
폰트 파일이 애플리케이션에 최적화된 방식으로 로드되어 반복 요청 시 빠르게 로드됩니다.
확인 방법
개발자 도구 네트워크 > Font 탭에서 구글 서버가 아닌 로컬 서버에서 폰트를 불러오는 것을 확인할 수 있습니다.