React 폰트 적용

전역으로 프로젝트에 폰트를 적용하는 방법

---

1. 원하는 폰트 파일 다운로드

• 사용할 폰트 파일을 다운로드
• 페이퍼 로지(Paper Logue) 폰트로 사용
  페이퍼로지 폰트 다운로드
• asset 폴더에 font 폴더 안에 넣어두기

2. @font-face로 폰트 등록

• 폰트를 프로젝트에서 사용하려면 index.css 파일에서 @font-face를 이용해 등록

@font-face {
  font-family: 'PaperLodgy-Regular';
  src: url('../src/assets/Fonts/Paperlogy_Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'PaperLodgy-Bold';
  src: url('../src/assets/Fonts/Paperlogy_Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Paper Lodgy-Medium';
  src: url('../src/assets/Fonts/Paperlogy_Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Paper Lodgy-SemiBold';
  src: url('../src/assets/Fonts/Paperlogy_SemiBold.ttf') format('truetype');
}

• font-family: 폰트의 이름을 지정
• src: 폰트 파일의 경로를 지정

3. 폰트 적용하기

• index.css 파일에서 @font-face 등록 코드 밑 body.에 적용

body {
  background-color: #000000;
  font-family: 'PaperLodgy-Regular','Paper Lodgy-SemiBold','Paper Lodgy-Medium','PaperLodgy-Bold',sans-serif;
}

• 원하는 스타일 파일에서 font-family로 선언해서 사용