SookDev

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 로 컨버팅 할 수 있다.

https://cloudconvert.com/

다운로드 후 ttf,otf 와 비교하면 현저하게 낮은 용량인것을 확인할 수 있다.


@font-face {
  font-family: 'NanumSquareNeo';
  src:
    url('../assets/fonts/NanumSquareNeo-bRg.woff2') format('woff2'),
    url('../assets/fonts/NanumSquareNeo-bRg.woff') format('woff'),
    url('../assets/fonts/NanumSquareNeo-bRg.ttf') format('truetype');
}

// 가장 가벼운 woff2 를 최우선으로 시작.
// woff2 를 지원하지 않으면 woff, woff 도 지원하지 않으면 ttf 를 사용한다.

src 내부에 font 파일을 넣는 이유는?
번들링에 포함이 되어 최적화 효과를 누릴 수 있다.

웹폰트와 최적화

01_폰트의 다양한 포맷