목차
01_폰트의 다양한 포맷
EOT → TTF/OTF → WOFF → WOFF2 순으로 용량이 작다.
TTF/OTF : 벡터기반의 폰트형식. 스케일이 변동되도 품질이 유지되고 모든 운영체제에서 지원된다.
WOFF,WOFF2 : 웹용으로 개발된 압축폰트 형식. 효율적인 웹성능을 제공
EOT : 마이크로소프트가 개발한 폰트형식.
운영체제마다 지원하는 폰트가 다르므로 다양한 폰트형식을 지원해주는것이 좋다.
웹페이지는 WOFF,WOFF2 를 주로 사용.
→ WOFF2는 최신기술이라 지원하지 않는 브라우저도 있으므로 WOFF 를 같이 사용할 수 있다.
웹폰트를 리액트에 적용하는 방법으로 웹폰트 서비스를 이용하거나 폰트를 다운로드하여 css에 기술하는 방법이 있다.
- 웹폰트 서비스 이용 : <link href=’font service’/>
- 간편하다.
- 외부 서비스의 동작이 늦어지게 된다면 초기로딩속도에도 영향을 준다는 단점이 있다.
- 폰트 다운로드 : @font-face : {font-family ~~ }
- 외부서비스에 의존하지 않아 외부서비스 이슈에 영향을 받지않는 장점이 있다.
- 폰트를 프로젝트 내에서 직접 관리해야 하며 서버용량에 대한 부담이 있을 수 있다.
- 폰트가 업데이트 될 시 직접 업데이트해야하는 번거로움이 있다.
만약 다운로드 받은 폰트가 무거운 TTF/OTF 형식이라면 아래 사이트에서 WOFF 로 컨버팅 할 수 있다.
다운로드 후 ttf,otf 와 비교하면 현저하게 낮은 용량인것을 확인할 수 있다.
src 내부에 font 파일을 넣는 이유는?번들링에 포함이 되어 최적화 효과를 누릴 수 있다.