[CSS] 다운로드 한 폰트 적용

react-create-app 의 디렉터리 구조를 따르고 있음.

 

1. OTF, TTF 형식을 WOFF 로 바꿔준다.

 

2. font 폴더에 변환한 폰트 파일을 넣는다.

 

3. font 폴더에 font.css 를 다음과 같이 작성한다.

@font-face {
  font-family: "black-godic";
  src: url("./검은고딕.woff") format(woff);
}

@font-face {
  font-family: "(사용할 이름)";
  src: url("파일 디렉토리 주소") format(파일 형식);
}

 

4. 가장 상위 파일인 index.js에서 font.css를 import 한다.

import './assets/font/font.css';

 

5. 하위 CSS 에서 적용이 되는지 확인한다.

Header.css 에서 작성하고 Header.js 에서 import

#header-explain h1 {
  font-family: "black-godic", sans-serif;
  font-size: 82px;
}

적용이 잘 되었음을 확인할 수 있다.