기본적으로 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] 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
해안해
상단으로

티스토리툴바