728x90
반응형
Next.js 프로젝트 생성 글에서 만든 Next.js 보일러플레이트를 개인 홈페이지로 바꾸기 위해 몇 가지 기본적인 내용을 적용했다.
한글 폰트 적용 (google font)
Next.js 보일러플레이트의 Inter 폰트 대신 한글 폰트를 기본으로 사용하도록 수정했다.
구글 폰트 브라우저에 나오는 한글 폰트 중 Noto Sans Korean을 선택했다.
다음과 같이 layout.tsx에서 Inter를 Noto_Sans_KR로 바꿔주면 간단하게 기본 폰트가 변경된다.
import { Noto_Sans_KR } from 'next/font/google'
const notoSansKr = Noto_Sans_KR({ subsets: ['latin'] })
...생략...
export default function RootLayout(...생략...) {
return (
<html lang="ko">
<body className={notoSansKr.className}>{children}</body>
</html>
)
}
만약 Noto Sans Korean 같은 variable 폰트를 사용하지 않는다면, 폰트 초기화 시 weight를 지정해야 한다. (style은 optional)
const roboto = Roboto({
weight: ['400', '700'],
style: ['normal', 'italic'],
subsets: ['latin'],
})
한글 폰트 적용을 위해 page.tsx의 "Get started by editing app/page.tsx" 텍스트를 한글로 수정하고, p 태그의 font-mono 클래스를 지우면, 아래와 같이 바뀐 폰트가 적용됐음을 확인할 수 있다.
<p className="... (font-mono 제거)">
<code className="font-mono font-bold">app/page.tsx</code>
를 수정해 보세요!
</p>
참고: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#google-fonts
Optimizing: Fonts | Next.js
Optimize your application's web fonts with the built-in `next/font` loaders.
nextjs.org
반응형
'웹 개발' 카테고리의 다른 글
| Next.js 홈페이지 만들기 - 기본 레이아웃 (3/3) (4) | 2023.12.21 |
|---|---|
| Next.js 홈페이지 만들기 - 다크 모드 (2/3) (0) | 2023.12.19 |
| Next.js 프로젝트를 GitHub pages에 배포하기 (0) | 2023.12.15 |
| Next.js 프로젝트 생성 (0) | 2023.12.14 |
| 노드, NPM 최신버전 업데이트 (0) | 2023.12.14 |