Next js에서 Pretendard 폰트 적용하기

안녕하세요. VeriLog입니다.

오늘은 Next js에서 Pretendard 폰트 적용하는 법을 작성하려고 합니다.

 

제가 사용한 방법은 global.css파일에 폰트를 정의하고 사용하는 방법입니다.

 

1. global.css 파일에 폰트 정의

@font-face {
    font-family: "Pretendard-Bold";
    src: url("/fonts/Pretendard-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard-SemiBold";
    src: url("/fonts/Pretendard-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard-Medium";
    src: url("/fonts/Pretendard-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Pretendard-Regular";
    src: url("/fonts/Pretendard-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

body {
    font-family: "Pretendard-Bold", "Pretendard-SemiBold", "Pretendard-Medium", "Pretendard-Regular";
}

 

저는 위의 코드처럼 폰트를 정의 했습니다.

또한, 폰트 파일은 /public/fonts/ 폴더 안에 넣어놨습니다.

여기서 중요한 점은 경로가 기본적으로 public으로 설정되어 있기 때문에!

public을 제외한, /fonts 부터 작성해주시면 됩니다.

 

2. src/app/layout.tsx

import 'src/global.css';

 

src/app/layout.tsx 파일에 global.css 파일을 import 해주시면 됩니다.

 

3. 사용 예시

<div style={{fontSize: 44, fontFamily: "Pretendard-Bold", lineHeight: "130%", color: colors.onColor.primary}}>예시</div>

 

도움이 되시길 바랍니다.