Next.JS에 NPM Font (Pretendard) 사용하기

왜?

1. 저장소에 폰트 파일을 넣기 싫었다.
• 저장소에 들어가는 바이너리 파일은 이미지로 충분하다

2. 버전관리의 이점도 있다.
• 다만 폰트 자체가 자주 업데이트 되는건 아니니 큰 차이는 없다.

3. 다들 저장소에 받아쓰는데 그러고 싶지 않은 홍대병 걸려서.
• 공식 문서에서 조차 받아서 쓰는 형태로 되있다 보니…

NextJS의 폰트 최적화 체계

1. 유저의 Privacy 향상 - Google 등의 다른 CDN 미사용
• 다만 우리 서버 트래픽을 쓴다는 단점이 있는데, a. Vercel이 알아서 해주겠지 b. 최적화 기능을 믿어보자 라는 마인드로 진행
• 사실 국내 트래픽 비용이 비싸지 해외 트래픽 비용은 생각보다 낮다.
• 참고로 Google Font의 경우 기본 내장된 프리셋이 있어서 그걸 써도 된다. 다만 Pretendard는 해당사항 없음…

2. 폰트 사이즈를 읽어서 Layout Shifting 방지
• 가끔 폰트 불러올때 사이즈 달라져서 레이아웃 조금씩 달라지는 경우가 있는데, 이걸 방지해준다. 근데 해보니 완전 방지는 아닌듯…

3. QoL 조금 향상
• 사실 큰건 아니고, global css를 덜 만질 수 있어서 좋다….

적용 작업

폰트 설치

npm install pretendard # or yarn, pnpm, or else...

localFont 설정

import localFont from "next/font/local";

export const pretendard = localFont({
    // 이때 node_modules는 해당 파일 위치의 상대경로로 한다.
    src: "./node_modules/pretendard/dist/web/variable/woff2/PretendardVariable.woff2",
    display: "swap",
    weight: "45 920",
});

적용

import { pretendard } from '@/theme'

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${pretendard.className}`}>
      <Component {...pageProps} />
    </main>
  )
}