[Portfolio] Next.js 폰트 설정하기

yujin·2025년 11월 3일

프로젝트

목록 보기

9/26

Next.js에서 layout.tsx 파일에 폰트를 설정하는 것은 next/font라는 Next.js의 내장 기능을 사용하기 위함입니다.
기존에 HTML에서 <link> 태그로 폰트를 불러오는 방식에 비해 성능과 사용자 경험 면에서 압도적인 장점들을 가집니다.

기존 방식의 문제: <link> 태그로 웹 폰트(예: Noto Sans KR)를 불러오면, 폰트가 로드되기 전까지 브라우저는 임시로 기본 폰트(굴림, Arial 등)를 보여줍니다. 잠시 후 Noto Sans KR 폰트가 로드되면, 텍스트가 새 폰트로 바뀌면서 글자 크기나 간격이 미세하게 변경되어 화면 전체가 "울컥"하고 흔들리는 현상이 발생합니다. 이를 CLS(Cumulative Layout Shift)라고 부르며, 사용자 경험에 매우 안 좋고 구글 검색 순위에도 불이익을 줍니다.
next/font의 해결: Next.js는 빌드 시점에 폰트 정보를 미리 계산하여, 임시 폰트와 웹 폰트의 크기 차이가 거의 없도록 자동으로 보정해 줍니다. 덕분에 폰트가 로드되어도 "울컥"거리는 현상 없이 매우 부드럽게 텍스트가 표시됩니다.

기존 방식의 문제: <link href="https://fonts.googleapis.com/...">는 사용자가 사이트에 접속할 때마다 'Google Fonts 서버'에 폰트를 요청하는 추가적인 네트워크 연결을 만듭니다. 이 과정에서 약간의 지연이 발생하며, 사이트 초기 로딩 속도가 느려집니다.
next/font의 해결: next/font는 개발자가 빌드할 때 자동으로 폰트 파일을 다운로드하여 프로젝트 내부에 저장시킵니다. 결과적으로 사용자는 Google 서버가 아닌, 우리 웹사이트 서버에서 직접 폰트를 받게 되어 불필요한 네트워크 연결이 사라지고 로딩 속도가 훨씬 빨라집니다.

layout.tsx는 모든 페이지의 공통 상위 파일입니다. 여기에 next/font로 폰트를 설정하고 <body> 태그에 className이나 CSS 변수(variable)로 적용하면, 프로젝트의 모든 컴포넌트에 단 한 번에, 일관되게 폰트를 적용할 수 있습니다. 폰트를 바꾸고 싶을 때도 이 파일 하나만 수정하면 됩니다.

사용자의 브라우저가 Google Fonts 서버에 직접 접속하지 않기 때문에, 사용자의 IP 정보 등이 외부 서버로 전송되지 않아 프라이버시 보호에 더 유리합니다.

import { Advent_Pro } from 'next/font/google';

const adventPro = Advent_Pro({
    weight: ['400', '700'], // 필요한 폰트 두께 선택
    subsets: ['latin'], // 필요한 서브셋 선택
});

<body className={adventPro.className}>{children}</body>