검색
검색
공개 노트 검색
회원가입로그인

나노 학습 : Next 14에서 Font 적용하기 (프리텐다드 로컬 폰트)

Next 14에서 Font 적용하기

pretendard : GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternative font for all cross-platform -> 가장 예쁨!

위의 github에서 파일을 다운로드 받은 후 web - variable - woff2 에 있는 PretendardVariable.woff2 파일을 app 폴더의 fonts 폴더를 만들어 옮겨 준다. (fonts 폴더는 app 폴더 안에 있어도 관계 없다.)

그 다음 루트 폴더의 layout.tsx에서 다음과 같이 작성한다.

import localFont from "next/font/local";

const pretendard = localFont({
  src: "./fonts/PretendardVariable.woff2",
  display: "swap",
  weight: "45 920",
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="ko">
      <body className={pretendard.className}>{children}</body>
    </html>
  );
}

weight 옵션을 지정하지 않으면 WebKit 기반의 브라우저에서 굵기가 잘못 렌더링 될 수 있으니 주의해 주세요.

이렇게 하면 로컬 폰트에서 렌더링이 된다!

참고 : Optimizing: Fonts | Next.js

공유하기
카카오로 공유하기
페이스북 공유하기
트위터로 공유하기
url 복사하기
조회수 : 3843
heart
T
페이지 기반 대답
AI Chat