Next.js는 13 버전부터 폰트 최적화를 지원하며, 별도의 다운로드 없이 최적화된 구글 폰트를 프로젝트에 적용할 수 있다.

사용 가능한 폰트는 Google Fonts 에서 확인할 수 있으며, 나는 Noto_Sans_KR을 프로젝트에 적용하였다.

기본 사용법

• 폰트를 import 하고 변수를 지정한 다음, main 태그의 className에 지정해준다.
  • 별도의 다운로드는 필요 없으며, 다양한 옵션에 대한 설명은 공식문서에서 확인할 수 있다.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { Noto_Sans_KR } from 'next/font/google';

const noto = Noto_Sans_KR({
  subsets: ['latin'], // 또는 preload: false
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main className={noto.className}>
      <Component {...pageProps} />
    </main>
  );
}

• Tailwind CSS를 사용중인데 font-semibold 아래의 두께가 적용되지 않아 fontWeight 배열을 추가하였더니 다양한 두께를 모두 사용할 수 있었다.

import '@/styles/globals.css';
import type { AppProps } from 'next/app';
import { Noto_Sans_KR } from 'next/font/google';

const noto = Noto_Sans_KR({
  subsets: ['latin'], // 또는 preload: false
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
});

export default function App({ Component, pageProps }: AppProps) {
  return (
    <main className={noto.className}>
      <Component {...pageProps} />
    </main>
  );
}

실행 결과

References

Optimizing: Fonts
next.js : google font 적용하기🧚‍♀️(feat. tailwind)