React 폰트 변경 방법

1. 필요한 폰트 다운로드

• 필자는 Cafe24Simplehae.ttf 파일을 다운로드 하였음

2. React 프로젝트에 폰트 복사(font/Cafe24Simplehae.ttf)

src/font/Cafe24Simplehae.ttf

3. 폰트 적용

App.css 내용 중 일부

• 아래 내용 추가
  • @font-face{
    font-family: "Cafe24Simplehae";
    src: url("./font/Cafe24Simplehae.ttf");
• App 전체에 해당 폰트를 적용할 것이기 때문에 .App 속성에 아래 내용 추가
  • font-family: "Cafe24Simplehae";
    
    • 위 그림에서 3번째 라인참고

4. 폰트 적용 결과

localhost:3000 화면 중 일부