Next.js | font 설정

Next.js 에서 font 설정하기

font 설정하는 방법에는 2가지가 있다.
1. 구글 폰트 사용하기 
(링크 : https://nextjs.org/docs/pages/building-your-application/optimizing/fonts)
2. Local Font

 

 ✔️ Local Font

사용하려는 폰트가 prentandard인데 구글 폰트에 없어서 로컬 폰트로 적용하는 방법을 선택할 수 밖에 없었다.

나는 public 폴더 안에 fonts 폴더를 만들어서 ttf 파일들을 넣어주었다.

 

그 다음 fonts.css 파일을 생성하여 폰트를 설정해준다.

@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('../public/fonts/Pretendard-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('../public/fonts/Pretendard-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('../public/fonts/Pretendard-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('../public/fonts/Pretendard-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('../public/fonts/Pretendard-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('../public/fonts/Pretendard-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('../public/fonts/Pretendard-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('../public/fonts/Pretendard-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('../public/fonts/Pretendard-Black.ttf') format('truetype');
}

body {
    font-family: 'Pretendard';
    font-weight: 400;
}

 

그리고 _app.js 파일에서 

import '../styles/fonts.css'

 

임포트 시켜주면 된다.

 

참고 : https://velog.io/@minju1009/Nextjs%EC%97%90-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EB%A0%A4%EB%A9%B4