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

 

1. 폰트를 다운로드 받습니다.

 

Fontsgeek : Download Thousands Of Cool Free Fonts For Windows And Mac.

Google Fonts

 

 

 

2. fonts 폴더를 만들어주고 해당 ttf/otf 파일을 넣어줍니다.

 

 

3.  index.css에서 해당 폰트를 불러줍니다.

@font-face { src: url () } 을 이용하여 해당 폰트를 불러와줍니다.

 

font-swap 속성을 웹 폰트를 적용하는 CSS에 추가하면 해당 CSS 가 적용되는 부분은 먼저 텍스트, 그러니까 시스템 글꼴로 된 텍스트 내용이 표시되고, 이후 웹 폰트가 다운로드 완료되어 로딩되면, 웹 폰트를 적용한 텍스트로 갱신을 해줍니다.

 

 

4. 사용하고자 하는곳에서 폰트를 꺼내 사용합니다.