Next.js 14 app router는 12와다르게 _document를 가지지 않으며 root layout에서 설정을 해야한다.
따라서 주로
- next/font/local의 localFont를 사용하거나
- next/font/google 의 googleFont를 사용하게 된다.
둘 다 별도의 설치 없이 import 해오면 된다.
나는 localFont 방식을 선호 하며 해당 방식이 구글링에서 찾기 힘들기에 localFont로 글을 작성한다.
기본 사용법
- font-file 다운로드
- 다운로드 시에는 woff2 확장자를 다운받아 브라우저 호환성을 높이는 것을 추천한다.
- variable과 static 두 종류로 나뉘는데 static은 Bold, Medium, Thin 등 weight가 나뉘어져있는 반면 variable은 직접 font-weight를 설정할 수 있다.
- 다운로드 받은 font-file은 public경로에 넣어 주어
import type { Metadata } from "next";
import "./globals.css";
import Header from "@/components/common/layout/Header";
import Footer from "@/components/common/layout/Footer";
import { Provider } from "jotai";
import Spinner from "@/components/common/modal/Spinner";
import localFont from "next/font/local";
const suit = localFont({
src: [
{
path: "../../public/font/SUIT.woff2",
weight: "500",
style: "normal",
},
],
});
export const metadata: Metadata = {
title: "Meta title",
description: "meta description",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body className={suit.className}>
<Provider>
<Header />
{children}
<Footer />
</Provider>
</body>
</html>
);
}
아래 코드와 같이
const suit = localFont({
src: [
{
path: "../../public/font/SUIT.woff2",
weight: "500",
style: "normal",
},
],
});- weight, style은 옵션이며 미작성시 weight는 400에 맞춰진다.
라는 변수를 작성 후
<body className={suit.className}>body 태그에 등록만 해주면 끝난다.
폰트는 /public/font/ 경로에 작성을 저장해줬다.
import 방식을 채택하지않고, 폰트 파일로 저장하는 이유는 사파리, 파이어폭스 등 브라우저에서 폰트의 최적화를 위해서이다.
프론트엔드 개발자 ( React, Next.js ) - 업데이트 중입니다.