리액트 폰트 적용

1. CDN을 이용한 방법

• index.html head 태그 사이에 사용하고 싶은 폰트 주소를 넣어준다.

index.html

JSXCopy

index.css

CSSCopy
* {
  font-family: 'Noto Sans KR', sans-serif;
}

하지만 매번 import 해오기 때문에 이 방법은 뷰를 그려주는 속도가 느리다.

2. 로컬에 저장해서 사용하는 방법

필요한 폰트를 다운로드 후

적절한 위치에 파일들을 넣어놓고

index.css 파일에 선언해서 사용한다.

CSSCopy

— font-family : src — url 에 넣은 폰트 파일을 사용시 입력할 이름
— font-weight : src — url 에 넣은 폰트 파일 사용시 입력할 굵기
— font-style : src — url 에 넣은 폰트 파일을 사용시 입력할 스타일
— src : url 은 인자로 폰트 파일을 받음 & format은 폰트 포맷.

폰트 포맷이 여러개인 이유?

각 브라우저의 호환성을 위해

CSSCopy