https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
Optimizing: Fonts | Next.js
Using Pages Router Features available in /pages
nextjs.org
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
13버전으로 업데이트 되면서 next/font라는게 생겼는데 폰트 적용하기가 훨씬 편해졌다.
예전에는 우당탕탕 하다가 글꼴 싹 다운받아서 적용하기도 했었는데ㅋㅋㅋㅋ
이건 폴더 만들고 어쩌고 저쩌고 하는 과정을 거치지 않아도 돼서 너무 편하다.
적용 순서
1. layout.js 에서 사용할 폰트 import
import { Exo_2, Montserrat } from "next/font/google";나는 Exo_2와 Montserrat 를 사용할거다.
2. 사용할 폰트 정의
export const exo = Exo_2({
weight: ["400", "700"],
style: ["normal", "italic"],
subsets: ["latin"],
display: "swap",
variable: "--exo",
});
export const montserrat = Montserrat({
weight: ["400", "700"],
style: ["normal", "italic"],
subsets: ["latin"],
display: "swap",
});weight, style 등을 정의하고
메인으로 사용할 폰트 외에는 --exo 처럼 변수명을 지정해준다.
이 변수명으로 css에서 사용할 것임
3. 메인 폰트 사용
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={(montserrat.className, exo.variable)}>{children}</body>
</html>
);
}메인으로 사용할 폰트를 montserrat.className과 같은 형식으로 적용하고 변수명을 사용할 폰트도 함께 써준다.
4. css 적용
.Text-Style {
font-family: var(--exo);
}var(변수명)
형태로 적용해주면 끝
page.js에서 폰트를 import하고 className={$(변수명) className1 className2} 이런식으로 안해도 된다.
css에 바로 적용 가능!
한 개의 폰트만 사용할거라면 variable 과정은 생략해도 된다.
'Next.js' 카테고리의 다른 글
| cache, dynamic rendering, 서버 자원 절약 (0) | 2023.05.16 |
|---|---|
| static rendering, dynamic rendering (0) | 2023.05.16 |
| Next.js 페이지 전환 시 MongoDB ObjectId() 사용하기 (0) | 2023.05.04 |
