[Next.js 폰트 최적화] 로컬 폰트 Local Font 적용

next/font 는 글꼴을 자동으로 최적화하고 외부 네트워크 요청을 제거하여 개인 정보 보호 및 성능을 향상시킨다.

웹 폰트를 사용할 때, 폰트 파일은 웹 페이지를 처음 로드할 때 네트워크 요청을 통해 다운로드되는데

localFont는 사용자 컴퓨터에 이미 존재하는 폰트를 로컬에서 불러오므로 폰트를 다운로드할 필요가 없어 로딩 속도가 빨라진다.

ㅣ공식 문서

Optimizing: Fonts | Next.js

Optimize your application's web fonts with the built-in `next/font` loaders.

nextjs.org

폰트 다운로드

우선 굵기 등 스타일을 자유롭게 변형할 수 있는 가변 폰트로 PretendardVariable 폰트를 사용했다.

Pretendard

Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는

cactus.tistory.com

layout.tsx

// src/app/layout.tsx

import localFont from 'next/font/local';

const pretendard = localFont({
  src: '../../public/fonts/PretendardVariable.woff2',
  display: 'swap',
  variable: '--font-pretendard',
  weight: '45 900',
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko" className={`${pretendard.variable}`}>
      <body>{children}</body>
    </html>
  );
}

src : 로컬 폰트 파일 경로 지정

display : 'swap' 브라우저가 폰트를 로드하기 전에는 기본 폰트를 표시하고, 폰트 로드가 완료되면 즉시 교체해 UX 개선

variable : CSS 변수 정의 (CSS에서 편리하게 사용하기 위함)

weight : 폰트 굵기 범위 지정

(* weight 옵션을 지정하지 않으면 WebKit 기반의 브라우저에서 굵기가 잘못 렌더링 될 수 있으니 주의)

그리고 html 태그 안에 className={`${pretendard.variable}`}

설정한 CSS 변수를 추가해 페이지 전체에 적용되도록 한다.

tailwind.config.ts

// tailwind.config.ts

theme: {
    extend: {
      fontFamily: {
        pretendard: ['var(--font-pretendard)'],
      }
    },
  },

tailwind 유틸리티 사용 시를 위해 fontFamily에 CSS 변수를 추가한다.

app/page.tsx

// page.tsx

export default function Home() {
  return (
    <div>
      <p className="font-black">Pretendard Black</p>
      <p className="font-bold">Pretendard Bold</p>
      <p className="font-medium">Pretendard Medium</p>
      <p className="font-regular">Pretendard Regular</p>
      <p className="font-light">Pretendard Light</p>
      <p className="font-thin">Pretendard Thin</p>
    </div>
  );
}

설정을 마치면 모든 페이지에서 이런 식으로 굵기 스타일을 적용해 사용할 수 있다.

저작자표시 비영리 (새창열림)

'Next.js' 카테고리의 다른 글

[Next.js + Naver Map API] 보이는 지도 영역의 마커만 표시하기 (Typescript) (0)	2025.02.24
[Next.js] Supabase PostGIS로 거리순 데이터 정렬하기 (1)	2025.02.24
[Next.js + Naver Map API] 네이버 지도 api 사용하기ㅣ현재 위치, 주소 가져오기, 마커 표시하기 (0)	2025.02.17
[Next.js] Supabase 타입 Type 설정과 적용 (0)	2025.02.14
[Next.js] Supabase 연동ㅣ데이터 가져오기 (0)	2025.02.13