[React] 리액트에 구글 폰트 적용하기 (google fonts)

구글폰트를 적용하는 방법은 2가지가 있다.

1. import로 불러와 적용하는 방법
2. 다운로드 받은 후 프로젝트 안에 폰트를 넣는 방법

1번의 방법은 매번 import 해오기 때문에 랜더링시 좀 더 느리다고 한다. 때문에 직접 다운로드하여 사용하는 방법을 적용 해보기로 했다.

---

1. 구글 폰트 사이트에서 원하는 폰트를 선택하여 다운받는다.

• 구글 폰트 사이트 : https://fonts.google.com/

2. 폰트를 모아놓을 폴더를 만들어 저장한다.

폴더 위치는 자유롭게 가능하다.

• ex) src/fonts/폰트.ttf

사용할 font들을 모아놓을 폴더를 만든다.

3. App.css 파일 안에 사용할 폰트들을 불러온다.

저장한 font를 어디에서나 사용할 수 있게 최상단 파일인 App에 정의했다. 

@font-face {
  font-family: [사용할 폰트 이름 - 마음대로 지정 가능];
  src: url(폰트가 저장되어 있는 경로);
}

@font-face {
  font-family: NanumGothic-Regular;
  src: url("../src/fonts/NanumGothic-Regular.ttf");
}

App.css

 

★ 기본 파일 경로는 public으로 되어있다! ★ 
url을 적을때 기본 경로는 public으로 되어있다. 위의 폴더 구조의 경우 fonts 폴더에 접근하기 위해서  "../src/fonts/NanumGothic-Regular.ttf" 으로 파일 경로를 지정하였다.

 

4. 원하는 곳에서 폰트를 사용한다.

// JS파일 안에서 정의하였다(참고)
// font-family: "폰트 이름";

const Keyword = styled.span`
  float: left;
  font-size: 18px;
  font-weight: 400;
  font-family: "DoHyeon-Regular";
`