Next.js 폰트 적용 방법

Next.js 14에서의 폰트 적용 방법을 알아보겠습니다.
구글 폰트를 어떻게 설정하고 사용할 수 있는지 단계별로 설명드리겠습니다!

---

 

font`와 `img`, `css` 같은 파일은 `public` 폴더 하위에 넣는 것을 권장합니다.

 

기본 폰트 추가

Next.js는 구글 폰트에서 제공하는 폰트를 지원하는 ‘next/font/google’ 패키지를 제공합니다.

import { 글꼴명 } from "next/font/google"; // 문법
import { Nanum_Pen_Script } from "next/font/google"; // 예제

 

 예시

// public/fonts/google_fonts.ts
import { Nanum_Pen_Script, Noto_Sans_KR } from "next/font/google";
export const nanum = Nanum_Pen_Script({ weight: "400", subsets: ["latin"] });
export const notosansKr = Noto_Sans_KR({ subsets: ["latin"] });

// page.tsx
import { nanum, notosansKr } from "../../public/fonts/google_fonts";

export default function Page() {
  return (
    <>
      <h1 className={`${nanum.className}`}>Nanum Pen Script 적용된 페이지</h1>
      <h1 className={`${notosansKr.className}`}>Noto Sans KR 적용된 페이지</h1>
    </>
  );
}

‘next/font/google’ 패키지를 사용할 때는 항상 해당 폰트 함수의 인스턴스를 생성해야 합니다. 인스턴스를 생성할 때 필요한 subsets와 weights 값이 헷갈릴 수 있지만, Visual Studio Code를 사용하면 쉽게 확인할 수 있습니다. 폰트 함수에 마우스를 올리면 해당 폰트의 타입을 확인할 수 있기 때문입니다.

 

서브셋?

서브셋은 폰트에서 특정 글꼴만 불러오게 하는 폰트 최적화 기법 중 하나입니다. 예를 들어, 영어만 필요한 경우 영어 서브셋만 지정하여 불러오면 폰트 크기를 최적화할 수 있습니다. next/font/google 패키지는 기본적으로 서브셋을 사용합니다.

자주 사용하는 서브셋은 다음과 같습니다:

cyrillic	키릴 문자 집합을 포함합니다. 동유럽과 중앙아시아의 언어에서 사용됩니다.	러시아어, 우크라이나어, 불가리아어, 세르비아어(키릴 문자), 카자흐어 등.
latin	기본 라틴 문자 집합을 포함합니다. 서유럽 언어의 대부분에서 사용됩니다.	영어, 프랑스어, 독일어, 스페인어, 이탈리아어, 포르투갈어 등.
latin-ext	기본 라틴 문자 집합과 동유럽 및 기타 언어의 확장된 라틴 문자를 포함합니다.	폴란드어, 체코어, 슬로바키아어, 헝가리어, 루마니아어 등.
vietnamese	베트남어 문자 집합을 포함합니다.	베트남어

 

`korean` 서브셋은 지원하지 않지만, 폰트 자체에서 한글을 지원하는 경우(`Noto_Sans_KR`) `preload`를 `false`로 지정할 수 있습니다.

const notoSansJapanese = Noto_Sans_JP({
  weight: '400',
  preload: false,
});