01252025년 4월 4일

[Next.js] Next.js + Tailwind에서 커스텀 폰트를 가장 쉽게 적용하는 방법!

? 서론

Next.js에서 Tailwind CSS를 사용할 때, 커스텀 폰트를 적용하는 방법은 여러 가지가 있다. 웹사이트의 타이포그래피는 사용자 경험을 좌우하는 중요한 요소 중 하나이며, 올바른 폰트 적용 방식은 성능 최적화와 가독성 개선에 기여한다.

하지만 다양한 방법 중에서도 가장 최적화된 방식을 선택하는 것이 중요하다. 적절한 방법을 선택하지 않으면 불필요한 리소스를 로드하여 성능이 저하될 수 있으며, 웹사이트의 초기 로딩 속도에도 영향을 미칠 수 있다.

이번 포스팅에서는 next/font/local을 활용한 폰트 적용 방법과 전통적인 @font-face를 사용하는 방법을 비교하고, 어떤 방법이 더 좋은지 알아보겠다.

? Tailwind CSS에서 폰트 추가 방법 추천

✅ 추천하는 방법: Next.js의 next/font/local을 사용하는 방법

: 이 방법은 Next.js에서 폰트를 최적화하는 공식적인 방법이며, 성능 최적화 및 사용자 경험 개선 측면에서 가장 우수한 선택이다.

이 방법을 추천하는 이유

자동 서브셋 처리 및 최적화 → 불필요한 글리프(문자)를 제거하여 폰트 파일의 크기를 줄이고 성능을 향상시킨다.
웹 폰트의 CLS (레이아웃 시프트) 방지 → 웹사이트가 로딩되는 동안 글꼴이 바뀌는 현상을 최소화하여 사용자 경험을 개선한다.
Tailwind 설정 없이 간편하게 적용 가능 → tailwind.config.ts 파일을 수정할 필요 없이 바로 적용할 수 있다.

? 추천하는 방법: next/font/local 사용

? src/app/layout.tsx

TypeScript

import localFont from "next/font/local";

const customFont = localFont({
  src: "../public/fonts/CustomFont.woff2",
  weight: "400",
  style: "normal",
  variable: "--font-custom",
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body className={`${customFont.className} text-gray-800`}>
        {children}
      </body>
    </html>
  );
}

✅ 이 방법의 장점

폰트 최적화 자동 처리
- 서브셋(subset) 처리로 불필요한 글리프 제거
- FOUT(Flash of Unstyled Text) 방지
Tailwind 설정 없이 사용 가능
- 별도로 tailwind.config.ts를 수정할 필요 없음
Next.js 공식 지원 방식
- next/font/local은 Next.js에서 웹 폰트를 최적화하는 공식적인 방법
손쉬운 적용
- customFont.className을 body 태그에 적용하면 전역적으로 반영

? 다른 방법: @font-face + Tailwind 적용

? globals.css

CSS

@font-face {
  font-family: "CustomFont";
  src: url("/fonts/CustomFont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

.font-custom {
  font-family: "CustomFont", sans-serif;
}

? tailwind.config.ts

TypeScript

import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      fontFamily: {
        custom: ["CustomFont", "sans-serif"],
      },
    },
  },
};

export default config;

? page.tsx

TypeScript

export default function Home() {
  return <div className="font-custom text-2xl">폰트 적용 완료!</div>;
}

❌ 이 방법의 단점

서브셋 처리를 하지 않음 → 폰트 용량이 클 경우 성능 저하 가능
초기 로딩 시 FOUT 발생 가능 → 웹사이트가 로드될 때 기본 폰트가 먼저 표시될 수 있음
Tailwind 설정을 따로 추가해야 함 → tailwind.config.ts를 수정하고 globals.css에도 스타일을 추가해야 함

? 결론: next/font/local을 사용하는 것이 가장 좋다!

방법	장점	단점
next/font/local 사용	자동 최적화, 서브셋 처리, FOUT 방지, Tailwind 설정 불필요	Tailwind에서 직접 스타일링 불가 (클래스로만 적용)
@font-face + Tailwind	Tailwind 클래스로 사용 가능	서브셋 처리 안 됨, FOUT 발생 가능, 설정 번거로움

? 결론: Next.js 프로젝트에서는 next/font/local을 사용하는 것이 가장 최적화된 방법이다. ?

이 방법을 사용하면 번거로운 설정 없이 최적화된 폰트 로딩이 가능하며, 성능 및 사용자 경험을 모두 향상시킬 수 있다.

즉, Tailwind의 설정을 변경하지 않고도 폰트를 적용할 수 있기 때문에 유지보수 또한 편리하다.

따라서 Next.js에서 Tailwind CSS와 함께 커스텀 폰트를 적용할 때는 next/font/local을 활용하는 것이 가장 좋은 선택이다!

최근 글