Web fonts, WOFF, Subsetting, 2010 Google Fonts 출시

한 줄로

웹사이트가 자체 폰트를 표시하는 기술입니다. 2010년 Google Fonts 출시가 결정적 분기점이 됩니다.

어디서 왔나

이전에는 웹이 사용자 PC에 설치된 폰트만 사용 가능했습니다. Arial, Times New Roman, Verdana 등 시스템 폰트 한정이었습니다.

2010년, Google이 Google Fonts를 출시합니다. 무료, 빠른 CDN, 한 줄 HTML로 폰트를 임베드합니다. 동시에 W3C가 WOFF (Web Open Font Format)를 표준화합니다.

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">

이게 디자인의 폭발적 다양성을 가져옵니다.

포맷 진화

TTF/OTF: 전통적 데스크탑 포맷입니다. 파일이 큽니다. WOFF (2010): 웹용입니다. 압축됩니다. WOFF2 (2018): 더 강한 압축입니다. 현재 표준입니다.

WOFF2가 TTF보다 약 30% 작습니다.

Subsetting

한국어 폰트는 글자가 11,172자입니다. 모두 다운로드하면 3~5MB입니다. Subsetting은 실제 페이지에 사용되는 글자만 추출하는 기술입니다.

자동 subsetting: Google Fonts가 페이지를 분석합니다. 수동 subsetting: pyftsubset, fonttools로 직접 합니다.

Pretendard 같은 한국 폰트는 보통 자체 subset 버전을 제공합니다.

한국 폰트

Noto Sans KR / Noto Serif KR: Google과 Adobe 공동 작업입니다. Pretendard (길형진, 2021): 한국 웹 표준입니다. D2Coding (NAVER, 코딩용)이 있습니다. 나눔고딕 (NAVER, 2008)도 있습니다.

바이브 메이커가 챙길 한 가지

웹 폰트는 무료지만 로딩 비용이 있습니다. subsetting + WOFF2 + preload 조합으로 첫 로딩 속도를 최적화합니다.

관련

Variable fonts, FOUT FOIT, Typography