Next.js 폰트 최적화

next.js의 13버전에서는 폰트 최적화를 지원함.

next/font에는 모든 폰트 파일에 대한 내장 자체 호스팅이 포함되어 있다.

이 새로운 폰트 시스템은 성능과 개인 정보 보호를 고려하여 모든 Google 폰트를 편리하게 사용할 수 있게 한다.

CSS 및 폰트 파일은 빌드 시간에 다운로드되어 정적 파일과 함께 자체 호스팅된다.

즉, 브라우저에서 Google로 요청이 전송되지 않는다.

next/font를 사용하면 자체적으로 CSS size-adjust 속성을 사용하기 때문에 layout shift도 일어나지 않는다.

• pages/_app.tsx

  import { Inter } from 'next/font/google'
  
  // If loading a variable font, you don't need to specify the font weight
  const inter = Inter({ subsets: ['latin'] })
  
  export default function MyApp({ Component, pageProps }) {
    return (
      <main className={inter.className}>
        <Component {...pageProps} />
      </main>
    )
  }

google font 중 Inter 라는 폰트를 적용한 것인데, 위와 같이 변수를 선언하고 main 태그에서 className으로 설정해주면 해당 폰트를 전역으로 default로 사용하게 된다.

google fonts에서 variable font로 제공하는 것은 위와 같이 선언하면 되지만, variable로 제공해주지 않는 폰트는 직접 weight을 지정해줘야 한다

• pages/_app.tsx

  import { Noto_Sans_KR } from "next/font/google";
  
  const NotoR = Noto_Sans_KR({
    weight: "400",
    subsets: ["latin"],
  });
  
  export default function MyApp({ Component, pageProps }) {
    return (
      <main className={NotoR.className}>
        <Component {...pageProps} />
      </main>
    )
  }

폰트를 전역이 아닌 직접 css 속성을 통해 지정해주고 싶다면 variable 속성에 이름을 지정해주고 font-family에 적용시키면 된다.

• pages/_app.tsx

  import { Noto_Sans_KR } from "next/font/google";
  
  const NotoB = Noto_Sans_KR({
    weight: "700",
    subsets: ["latin"],
    variable: "--Noto-B",
  });
  
  export default function MyApp({ Component, pageProps }) {
    return (
      <main className={NotoB.variable}> {/* className이 아닌 variable로 지정 */}
        <Component {...pageProps} />
      </main>
    )
  }

  font-family: var(--Noto-B);

폰트를 여러개 등록하고 싶다면, 아래처럼 등록하면 된다.

• pages/_app.tsx

  import { Noto_Sans_KR } from "next/font/google";
  
  const NotoR = Noto_Sans_KR({
    weight: "400",
    subsets: ["latin"],
  });
  const NotoB = Noto_Sans_KR({
    weight: "700",
    subsets: ["latin"],
    variable: "--Noto-B",
  });
  
  export default function MyApp({ Component, pageProps }) {
    return (
      <main className={`${NotoR.className} ${NotoB.variable}`}>
        <Component {...pageProps} />
      </main>
    )
  }

NotoR이 기본적인 폰트로 적용되었고, 부분적으로 css의 font-family를 통해 NotoB를 적용시킬 수 있다.