[React] 로컬 폰트 적용하기(.ttf/.otf)

 

기존 폰트가 아닌 다른 폰트를 적용하게 되어 기록.

 

1.

Google Fonts

등을 통해 폰트를 다운받는다.

 

2. 원하는 경로에 font관련 폴더를 만들어 해당 폰트를 넣는다.

 

3. .css 파일에서 폰트를 불러온다.

나는 default.css 파일을 따로 만들어 폰트를 관리하도록 했다.

@font-face {}를 통해 해당 폰트를 불러올 이름을 font-family로 지정하고,

src: url();를 통해 폰트를 저장한 경로를 불러온다.

 

4. font 사용법

위처럼 해당 폰트를 사용할 부분에 3번의 font-family로 설정한 이름을 불러온다.

 

5. 적용 확인