기본적으로 Next.js는 Google Font에서 제공하는 폰트들을 별다른 요청 없이 가져와 쓸 수 있도록 되어있다.
Next.js 앱의 기본 상태에서 app 폴더의 루트 layout.tsx를 보면, 실제로 다음과 같이 Inter 폰트를 next/font/google 으로부터 import하여 모든 페이지에 적용 중임을 확인할 수 있다.
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function MyApp({ Component, pageProps }) {
return (
<main className={inter.className}>
<Component {...pageProps} />
</main>
)
}
내가 적용하고 싶은 폰트는 Pretendard로, Google Font에서는 찾아볼 수 없다. 따라서 로컬에 폰트를 추가하여 사용해야 하는데, 이때는 next/font/local 으로부터 import 해주어 사용하면 된다. (Google Fonts를 사용할 때와 크게 다르지 않다.)
import localFont from 'next/font/local'
const myFont = localFont({ src: './my-font.woff2' })
export default function MyApp({ Component, pageProps }) {
return (
<main className={myFont.className}>
<Component {...pageProps} />
</main>
)
}
나는 /public/fonts 에 폰트 파일을 저장시켰고, 이에 맞추어 경로를 지정해주었다.
// /app/layout.tsx
import localFont from 'next/font/local'
import './globals.css'
const pretendard = localFont({ src: '../public/fonts/Pretendard-Regular.woff2' })
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="en">
<body className={pretendard.className}>{children}</body>
</html>
)
}
이렇게 하면 끝이다.
너무 쉽죠?
사실 처음에 Tailwind CSS에서 Pretendard를 기본 폰트로 적용하는 방법을 찾아보면서
globals.css에 @font-face랑 @layer base 추가해주고..
tailwind.config.ts에 theme.extend.fontFamily에 Pretendard 추가하고..
하면서 삽질을 좀 했는데
Next.js에서는 그냥 거의 처음 설정된 상태에서 import랑 변수 이름만 바꾸면 되는 수준이어서 엄청 간단하다.
(전역 폰트 설정까지 최적화 시켜놓은걸 보고 사실 좀 놀랐다 .. 어디까지 편해질거냐ㄷ ㄷ)
참고 :
'Next.js' 카테고리의 다른 글
| [Next.js] Next.js Middleware / 미들웨어, 어떨 때 사용할까? (0) | 2024.05.28 |
|---|---|
| [Next.js] 다크모드 기능 구현하기 (0) | 2024.05.28 |
| Next.js로 웹서비스 만들기 4주차 - 게시판 만들기 (Dynamic Routes, 페이지 이동, MongoDB 데이터 수정) (0) | 2024.04.09 |
| Next.js로 웹서비스 만들기 3주차 - Next.js에서 MongoDB 사용하기 (0) | 2024.04.02 |
| Next.js로 웹서비스 만들기 2주차 - SSR, 캐싱, 자동 라우팅, 서버 컴포넌트 (0) | 2024.03.26 |
