WebFont 크기 줄이기
타이포그래피는 좋은 디자인, 브랜딩, 가독성 및 접근성의 기본입니다. WebFont는 위의 모든 것 이상을 가능하게 합니다. 텍스트는 선택 가능하고 검색 가능하며 확대/축소 가능하고 높은 DPI 친화적이며 화면 크기와 해상도에 관계없이 일관되고 선명한 텍스트 렌더링을 제공합니다. WebFonts는 좋은 디자인, UX 및 성능에 매우 중요합니다.
WebFont 최적화는 전체 성능 전략의 중요한 부분입니다. 각 글꼴은 추가 리소스이며 일부 글꼴은 텍스트 렌더링을 차단할 수 있지만 페이지에서 WebFonts를 사용한다고 해서 더 느리게 렌더링되어야 하는 것은 아닙니다. 반대로 최적화된 글꼴을 페이지에 로드 및 적용하는 방법에 대한 신중한 전략과 결합하면 전체 페이지 크기를 줄이고 페이지 렌더링 시간을 개선할 수 있습니다.
WebFont의 구조 #
WebFont는 글리프 모음이며 각 글리프는 문자나 기호를 설명하는 벡터 모양입니다. 결과적으로 두 개의 간단한 변수가 특정 글꼴 파일의 크기를 결정합니다. 각 글리프의 벡터 경로 복잡성과 특정 글꼴의 글리프 수입니다. 예를 들어, 가장 인기 있는 WebFont 중 하나인 Open Sans에는 라틴어, 그리스어 및 키릴 문자를 포함하는 897개의 글리프가 포함되어 있습니다.

글꼴을 선택할 때 지원되는 문자 집합을 고려하는 것이 중요합니다. 페이지 콘텐츠를 여러 언어로 현지화해야 하는 경우 사용자에게 일관된 모양과 경험을 제공할 수 있는 글꼴을 사용해야 합니다. 예를 들어, Google의 Noto 글꼴 모음은 전 세계의 모든 언어를 지원하는 것을 목표로 합니다. 그러나 모든 언어가 포함된 Noto의 총 크기는 1.1GB+ ZIP 다운로드가 됩니다.
이 게시물에서는 WebFont의 전달된 파일 크기를 줄이는 방법을 알아봅니다.
WebFont 형식 #
오늘날 웹에서는 4가지 글꼴 컨테이너 형식을 사용하고 있습니다.
WOFF 및 WOFF 2.0이 가장 폭넓게 지원되지만 이전 브라우저와의 호환성을 위해 다른 형식을 포함해야 할 수도 있습니다.
- WOFF 2.0 변형을 지원하는 브라우저에 제공합니다.
- 대부분의 브라우저에 WOFF 변형을 제공합니다.
- 이전 Android(4.4 미만) 브라우저에 TTF 변형을 제공합니다.
- 이전 IE(IE9 미만) 브라우저에 EOT 변형을 제공합니다.