next.js 에서 폰트 변경하는 법
crate-next-app으로 next로 시작하게 되면 모든 google 폰트가 자동 배포가 포함되어 있다.
next/font
- next/font를 사용하게 되면 폰트를 최적으로 로드할 수 있음
- 모든 글꼴 파일에 대한 자동 자체 호스팅이 내장되어 있음
- 브라우저 캐싱 & 프리로딩을 지원하여 페이지 로딩 속도를 높일 수 있음
- next/font/google
- 구글 폰트의 CDN 서비스를 통해 폰트 불러옴
- SSR과 CSR 지원
- next/font/local
- 웹 폰트 다운로드 시간 절약, 오프라인 사용 가능성 제공
- 이미지와 마찬가지로 클라이언트 측에서 파일 다운 X, 페이지 로드 속도 향상
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}사용자가 원하는 폰트로 변경하기 위해 로컬 파일에 폰트 파일을 별도로 저장하거나 cdn으로 가져오면 변경이 가능하다.
그 방법으로는
import localFont from "next/font/local"
const pretendard = localFont({
src: "../../public/fonts/PretendardVariable.woff2",
display: "swap",
weight: "400 700",
});
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={pretendard.className}>{children}</body>
</html>
);
}정상적으로 폰트가 변경된 걸 확인할 수 있다.
'REACT & NEXT' 카테고리의 다른 글
| [Next] 환경 변수 사용하기 (.env) (0) | 2025.01.14 |
|---|---|
| [React] css module 사용하기 (1) | 2024.08.27 |
| [Next] CSR, SSR, SSG 의 차이 (0) | 2024.08.16 |
| [Next] next/image (0) | 2024.05.31 |
| [Next]Next.js + TypeScript 시작하기 (1) | 2024.03.26 |
