next/font와 tailwind v4

강의에서 next/font에 대한 설명을 해주셨는데, module.css 기반으로만 설명이 되어 있었다.
나는 현재 tailwind에 관심이 많으니, 최신 버전으로 next/font를 적용하는 방법을 이것저것 알아보았다.

목표 : Pretendard를 next/font 및 tailwind v4를 이용하여 적용하기

1. pretendard 파일 다운로드
next/font의 로컬은 말 그대로 실제 파일이 필요.
pretendard github에서 최신 파일을 다운로드했다.
파일이 굉장히 많은데 PretendardVariable.woff2 를 많이 사용하는 것 같아 이걸 넣어 보았다.

2. 프로젝트 폴더에 폰트 파일 업로드
public 안에 fonts 라는 폴더를 만들어서 넣었다.
블로그 돌아다니다 보니 이렇게 사용을 하는 것 같아서 일단 이렇게 폴더 구조를 짰다.

3. layout.tsx 에 pretendard 설정


// layout.tsx
import localFont from "next/font/local"

const pretendard = localFont({
  src: "../public/fonts/PretendardVariable.woff2",
  variable: "--font-pretendard",
});

4. globals.css 에 변수 설정


// globals.css
@theme inline {
  --font-sans: var(--font-pretendard);
}

@theme 에 넣으려고 했는데, next.js 처음 생성했을 때 @theme inline 이 이미 기재되어 있었다.
찾아보니까 기존 CSS 변수를 연결할 때는 @theme inline 에 쓴다고 한다...!
next/font도 variable 로 CSS 변수 생성한 셈이고, 기존 샘플 코드도 보니 그렇게 써 있었어서 똑같이 @theme inline 에 작성했다.

--font- 뒤에는 변수명처럼 설정 가능한 것 같은데 공식 문서랑 블로그들 참고해서 무난하게 sans로 설정

5. layout.tsx 에 클래스 설정


// layout.tsx
import localFont from "next/font/local"

const pretendard = localFont({
  src: "../public/fonts/PretendardVariable.woff2",
  variable: "--font-pretendard",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body className={`${pretendard.variable} font-sans`}>
        <p>테스트</p>
        <main>{children}</main>
      </body>
    </html>
  );
}

{pretendard.variable} 은 Provider 처럼 변수 설정 범위??? 같은 느낌인 듯 하다...
실제 적용은 font-sans 클래스를 부여함으로써 적용

이렇게 하고 개발 모드에서 봤는데 적용이 잘 된다!
혹시 싶어서 npm run build 하고 확인해 봤는데도 잘 적용이 되어 있다. ^_^

목표 : Pretendard를 next/font 및 tailwind v4를 이용하여 적용하기

댓글(1)