처음 만난 Next.js 문서
12.2
Fonts
지금부터는 폰트 최적화에 대해서 살펴보도록 하겠습니다. Next.js에서는 폰트 최적화를 위해 next/font 패키지를 제공합니다. next/font 패키지는 커스텀 폰트를 포함하여 자동으로 폰트를 최적화하여 성능을 향상시키고, 외부 네트워크 요청을 제거함으로써 개인정보를 보호해줍니다.
또한 next/font 패키지는 모든 폰트 파일에 대해 내장된 자동 셀프 호스팅 기능을 제공합니다. 그래서 CSS와 폰트 파일은 빌드 시 다운로드되며, 나머지 정적 자산과 함께 셀프 호스팅됩니다. 그리고 이를 통해 기본 CSS size-adjust 속성을 사용하여 Layout Shift 없이 웹 폰트를 최적의 방식으로 로드할 수 있습니다.
12.2.1 Google Fonts
Next.js에서는 next/font/google 패키지를 통해 모든 Google 폰트를 편리하게 사용할 수 있습니다. 폰트는 배포 시 포함되며 배포와 동일한 도메인에서 제공됩니다. 즉, 브라우저에서 Google로 요청이 전송되지 않는다는 것입니다.
Google Fonts를 사용하기 위해서는 먼저 아래와 같이 next/font/google에서 사용하려는 폰트를 import해서 사용하면 됩니다. 이 때 성능과 유연성을 위해 가변 폰트(variable fonts)를 사용하는 것을 권장합니다.
// app/layout.tsx
import { Inter } from 'next/font/google';
// 가변 폰트를 사용할 수 있는 경우, 폰트의 굵기(weight)를 지정하지 않아도 됨
const inter = Inter({
subsets: ['latin'],
display: 'swap',
});
interface RootLayoutProps {
children: React.ReactNode;
}
function RootLayout(props: RootLayoutProps) {
return (
<html
lang='en'
className={inter.className}>
<body>{props.children}</body>
</html>
);
}
export default RootLayout;
만약 가변 폰트를 사용할 수 없는 경우, 아래와 같이 폰트의 굵기(weight)를 지정해야 합니다.
// app/layout.tsx
import { Roboto } from 'next/font/google';
// 가변 폰트를 사용할 수 없는 경우, 폰트의 굵기(weight)를 지정해야 함
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
display: 'swap',
});
interface RootLayoutProps {
children: React.ReactNode;
}
function RootLayout(props: RootLayoutProps) {
return (
<html
lang='en'
className={roboto.className}>
<body>{props.children}</body>
</html>
);
}
export default RootLayout;
또한 아래와 같이 배열을 사용하여 여러 굵기(weight)와 스타일(style)을 지정할 수 있습니다.
const roboto = Roboto({
weight: ['400', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
display: 'swap',
});
12.2.2 Local Fonts
Next.js에서 로컬에 파일 형태로 존재하는 폰트를 사용하고 싶을 경우, 아래와 같이 next/font/local 패키지를 import 하고, src 속성에 글꼴 파일의 경로를 지정하면 됩니다. 이 때도 역시 성능과 유연성을 위해 가변 폰트(variable fonts)를 사용하는 것이 좋습니다.
// app/layout.tsx
import localFont from 'next/font/local';
// 폰트 파일은 'app' 폴더 내에 위치할 수 있음
const myFont = localFont({
src: './my-font.woff2',
display: 'swap',
});
interface RootLayoutProps {
children: React.ReactNode;
}
function RootLayout(props: RootLayoutProps) {
return (
<html
lang='en'
className={myFont.className}>
<body>{props.children}</body>
</html>
);
}
export default RootLayout;
만약 하나의 폰트 패밀리에 여러 파일을 사용하려는 경우 아래와 같이 src 속성을 배열형태로 작성하면 됩니다.
const roboto = localFont({
src: [
{
path: './Roboto-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: './Roboto-Italic.woff2',
weight: '400',
style: 'italic',
},
{
path: './Roboto-Bold.woff2',
weight: '700',
style: 'normal',
},
{
path: './Roboto-BoldItalic.woff2',
weight: '700',
style: 'italic',
},
],
});
마지막 업데이트: 2025년 10월 24일 02시 48분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page