[React] React 프로젝트에 폰트 적용하기

 

 

폰트를 적용할때 cdn을 사용하면 성능이 안 좋아진다고 해서 폰트를 직접 다운 받아 적용하는 방법에 대해 알아 보았다.

 

1. 적용할 폰트를 다운 받는다.

나는 눈누라는 사이트를 사용하였다. (예쁜 한글 폰트가 많아서 자주 사용함 🤩 )

https://noonnu.cc/

눈누

 

폰트 상세 페이지에서 다운로드 버튼을 볼 수 있다.

이 버튼을 클릭하면 다운로드 페이지로 바로 이동하여 다운 받을 수 있음.

 

 

2. 다운받은 폰트를 src 폴더 안에 넣어준다.

나는 src 폴더 안에 fonts 폴더를 먼저 만들고 그 안에 넣어줬다.

 

 

3. font-face 정의 후 원하는 곳에 적용한다.

나는 전체 페이지에 한번에 적용하기 위해 index.css 파일에서 font-face를 정의하고 body에 바로 font-family를 적용해줬다.

index.css

@font-face {
  font-family: "GowunDodum-Regular";
  font-weight: normal;
  src: url("./fonts/GowunDodum-Regular.ttf") format("truetype");
}

body {
  font-family: "GowunDodum-Regular";
}

 

역시 폰트만 바꿔줘도 뭔가 있어 보인당 🥳