[next.js] font 글꼴 적용하기

body에서 전역적으로 쓰는 글꼴과 몇 몇 페이지에서 사용하는 타이포그래피 글꼴이 있어 구분이 필요하였다.

project/
├── src/
│   ├── styles/
│ 	  	├──index.scss
│ 	  	├──globals.scss
│   	├── _font.scss

1. 파일구조
   먼저 styles 폴더 내 _font.scss 파일 생성

// 전역적 사용 글꼴
@font-face {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css ")
    format("woff2");
}

// 일부 사용 글꼴
@font-face {
  font-family: "ChosunNm";
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

2. 그리고 나는 styles 폴더 내 index.scss 폴더에서 공통 scss 파일을 모두 forward 해서 사용 중이라 @forward "font" 하였다.

3. 전역적으로 글꼴 적용

//globals.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Pretendard, sans-serif;
}

font-family로 _font.scss에서 선언했던 font-family 명을 기입해준다.

4. 부분적으로 글꼴 적용
   사용하는 페이지의 page.module.scss 에서 해당 _font.scss를 @use 또는 import 하여 위와 같은 식으로 font-family 이름을 기입해준다.

@use "../index" as v;

.msg {
  color: v.$grayscale-gr500;
  font-size: 2.7rem;
  font-weight: 400;
  line-height: 48px;
  font-family: ChosunNm, sans-serif;
}

굉장히 간단하다!!