Next 14 스터디 (공개)
나노 학습 : Next 14에서 Font 적용하기 (프리텐다드 로컬 폰트)
Next 14에서 Font 적용하기
pretendard : GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform -> 가장 예쁨!
위의 github에서 파일을 다운로드 받은 후 web - variable - woff2 에 있는 PretendardVariable.woff2 파일을 app 폴더의 fonts 폴더를 만들어 옮겨 준다. (fonts 폴더는 app 폴더 안에 있어도 관계 없다.)
그 다음 루트 폴더의 layout.tsx에서 다음과 같이 작성한다.
import localFont from "next/font/local";
const pretendard = localFont({
src: "./fonts/PretendardVariable.woff2",
display: "swap",
weight: "45 920",
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko">
<body className={pretendard.className}>{children}</body>
</html>
);
}weight 옵션을 지정하지 않으면 WebKit 기반의 브라우저에서 굵기가 잘못 렌더링 될 수 있으니 주의해 주세요.
이렇게 하면 로컬 폰트에서 렌더링이 된다!
