[Next.js] next/font/local 폰트 적용하기

next/font 를 사용하면 폰트를 최적으로 로드할 수 있다.
모든 글꼴 파일에 대한 자동 자체 호스팅이 내장되어 있어, 레이아웃 이동 없이 최적으로 글꼴을 로드 할 수 있다.

next/font/google vs. next/font/local

• next/font/google과 next/font/local 모두 폰트 최적화를 지원한다. 두 방식 모두 폰트에 대한 브라우저 캐싱과 프리로딩을 지원하여 페이지 로딩 속도를 높일 수 있다.
  • next/font/google
    • 구글 폰트의 CDN 서비스를 통해 폰트를 불러올 수 있다.
    • 서버사이드 렌더링(SSR)과 클라이언트사이드 렌더링(CSR)을 지원한다.
  • next/font/local
    • 웹 폰트 다운로드 시간을 절약하고, 오프라인 사용 가능성을 제공한다.
    • 이미지와 마찬가지로 클라이언트 측에서 파일을 다운로드할 필요가 없으므로 페이지 로드 속도를 향상시킬 수 있다.

next/font/local 사용하기

웹 폰트를 지원하지 않는 폰트 파일을 사용함에 따라 next/font/local을 사용했다.

_app.tsx 혹은 페이지 컴포넌트에 설정하기

// _app.tsx or some page component
import localFont from "next/font/local";

// 다음과 같이 로컬 폰트 변수를 생성한다.
const MyLocalFont = localFont({
	// 아래와 같이 굵기 별로 폰트를 지정해 사용할 수 있다.
  src: [
    {
      path: ...,
      weight: ...
    },
    ...
  ]
});
...

export default function App({ Component, pageProps }: AppProps) {

  return (
    <main **className={MyLocalFont.className}**>
        <Component {...pageProps} />
    </main>
  );
}

가변 글꼴

위와 같이 가변 글꼴을 사용해 폰트를 지정하면, Next.js에서 지원하는 성능과 유연성을 누릴 수 있다고 한다.

Preloading

• 위와 같은 코드를 사용하는 경우, 페이지 컴포넌트인지에 따라 route에 대한 preload가 다르게 동작한다.
  • _app.tsx : 모든 route에 폰트가 preload된다.
  • 특정 페이지 : 해당 route에만 폰트가 preload된다.

폰트 재사용

• next/font/local이든 next/font/google 이든, 호출할 때마다 해당 폰트는 애플리케이션에 하나의 인스턴스로 호스팅 된다.
  • 즉, 여러 파일에서 같은 font 함수를 로드 하면, 같은 폰트에 대한 여러 개의 인스턴스가 호스트되는거다.
• 이땐 이렇게 하자
  1. 하나의 shared 파일에서 폰트 로딩 함수를 호출하기
  2. constant로 export하기
  3. 이 폰트를 사용하려는 각 파일에서 constant를 import하기

Appendix. ChakraUI에서 사용하기

// _app.tsx
import localFont from "next/font/local";

const MyLocalFont = localFont({
  src: [
    {
      path: ...,
      weight: ...
    },
    ...
  ]
});

const customTheme = extendTheme({
  fonts: {
	  body: MyLocalFont.style.fontFamily
	}
});

export default function App({ Component, pageProps }: AppProps) {

  return (
    <ChakraProvider>
      <ThemeProvider **theme={customTheme}**>
        <Component {...pageProps} />
      </ThemeProvider>
    </ChakraProvider>
  );
}

Reference

next/font | Next.js
Basic Features: Font Optimization | Next.js