NextJS에서 로컬 글꼴을 로드하는 방법(최적 방법)

이것은 NextJS에서 사용자 지정 로컬 글꼴을 로드하는 제 솔루션입니다.

/public 폴더에 글꼴을 추가합니다. woff2 확장자는 caniuse에서 볼 수 있듯이 충분합니다.

추신. problem regarding vertical alignment이 있는 경우 this awesome tool을 사용하여 수정하십시오. 글꼴을 로드하고 "수직 메트릭 수정"을 선택하기만 하면 됩니다. 그런 다음 이 새 글꼴을 대신 사용하십시오.

아래와 같이 CSS @font-face를 사용하여 글꼴을 가져옵니다.

@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/BebasNeue/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

미리 로드하여 글꼴을 최적화합니다. _Document 파일에 아래 스니펫을 추가합니다.

<link
  rel="preload"
  href="/fonts/BebasNeue/BebasNeue-Regular.woff2"
  as="font"
  crossOrigin=""
/>

추신. 캐싱 메커니즘을 추가할 필요가 없습니다. Nextjs는 정적 자산을 처리합니다. 자세한 내용here

예를 들어 lambdatest을 사용하여 다른 브라우저(safari, chrome, firefox 및 edge)에서 테스트해야 합니다.

참조:
https://leerob.io/blog/fonts
https://github.com/vercel/next.js/discussions/25389