간단하게 리액트에 구글 폰트 적용하기

리액트에 외부 폰트 적용하는 방법 중에서 제일 간단한 방법을 소개하고자 한다.

 

이번 프로젝트에서 나는 배민체 중 도현체를 웹 페이지에 적용하고자 한다.

 

🥓 적용하고자 하는 글씨체를 찾는다.

구글 폰트 사이트에서 원하는 글씨체를 찾는다.

저기서 Language를 Korean으로 설정하면 한글을 지원해 주는 글씨체를 모아서 볼 수 있다.

 

🥓 Select this style을 클릭한다.

 

 

빨간 네모친 부분을 보면 Select this style을 찾을 수 있다. 저 버튼을 클릭하자.

 

오른쪽 상단에 있는 저 버튼을 클릭하자.

 

그럼 위와 같은 Selected family가 나타난다. 저기서 @import를 선택하고 저기서 @import url('주소');를 복사한다(style 태그는 제외한다).

 

🥓 리액트에서 설정을 해준다.

src/App.css 파일이다. 맨 위에 복사한 주소를 삽입하였다. 그리고 .App에 font-family를 설정해 주었다.

적용된 것을 확인할 수 있다!