woff2라는 이름의 Type 1 폰트

관련 파일: _sass/minimal-mistakes/_variables.scss, assets/css/fonts/, 6bfbe498

이 블로그의 본문 글꼴은 한글 MaruBuri와 라틴 Merriweather Light를 unicode-range로 섞은 조합이고, 고딕은 NanumGothic, 이탤릭 한글은 Hahmlet이다. assets/css/fonts/에는 이들이 .woff와 .woff2 두 벌로 있었다. .woff2 파일들은 2022년의 “Update fonts” 커밋 이후로 한 번도 바뀌지 않았다.

src 순서를 뒤집어 둔 이유

_variables.scss의 @font-face는 관행과 반대로 WOFF를 먼저, WOFF2를 나중에 적고 있었다.

@font-face {
  font-family: "MySerifFont";
  src: url('fonts/MaruBuri-Regular.woff') format('woff'),
       url('fonts/MaruBuri-Regular.woff2') format('woff2');
  ...
}

브라우저는 src 목록에서 자기가 지원하는 형식 중 첫 번째를 받는다. WOFF2가 WOFF보다 작은 것이 정상이므로 보통은 WOFF2를 앞에 둔다. 이 저장소에서 순서가 반대였던 이유는 파일 크기였다. NanumGothic-Bold의 .woff는 2.4MB, .woff2는 4.4MB였다. 누군가 .woff만 글리프 서브셋을 했고 .woff2는 풀 폰트로 남아 있다고 해석했고, 그 해석대로 작은 쪽을 먼저 받게 순서를 뒤집어 둔 것이다. 이 해석은 내 쪽 메모에도 “woff2를 같은 범위로 다시 서브셋하면 그때 순서를 되돌린다”는 조건과 함께 적혀 있었다.

해석이 틀렸다. 6bfbe498의 부모에서 옛 .woff2의 첫 바이트를 읽으면 이렇다.

$ file NanumGothic-Regular.woff2   # 6bfbe498^
PostScript Type 1 font program data (NanumGothic 3.020;PS 1;hotconv 1.0.57;makeotf.lib2.0.21895)

WOFF2 파일은 wOF2 네 글자로 시작한다. 옛 파일 열한 개 중 열 개는 0x80 0x01로 시작하는 PFB, 즉 PostScript Type 1 폰트 프로그램이었다. 확장자만 .woff2였고, 브라우저는 이것을 폰트로 해석할 수 없다. 풀 폰트라서 큰 것이 아니라 웹 폰트가 아니라서 큰 것이었다. 유일한 예외는 IBM Plex Sans KR로, 이것만 진짜 WOFF2였다.

그런데도 사이트는 멀쩡히 보였다. 순서를 뒤집어 둔 덕분이다. 브라우저는 목록의 첫 항목인 WOFF를 받아 성공했으므로 뒤의 가짜 WOFF2는 한 번도 내려받지 않았다. 틀린 해석이 만든 우회가 틀린 파일을 가리고 있었던 셈이다. 이 커밋이 어떤 경위로 파일을 열어 보게 됐는지는 기록이 남아 있지 않다. 트랜스크립트에는 이 작업의 대화가 없고, 커밋 메시지는 “웹폰트 11종 woff2 바이너리 서브셋 다이어트 및 경량화” 한 줄이다. 아래는 diff와 파일을 직접 읽어 확인한 것이다.

새로 만든 서브셋

새 .woff2는 전부 wOF2로 시작하는 진짜 WOFF2이고, 원본 대비 담은 글자도 줄었다. fontTools로 cmap을 세면 이렇다.

파일	새 woff2 코드포인트	한글 음절	비고
NanumGothic-Regular	11,827	11,172	woff는 17,666
MaruBuri-Regular	12,398	11,172	woff와 동일
Merriweather-Light	231	0	woff는 876
Hahmlet-Medium	3,607	2,788	woff보다 24자 늘어남
IBMPlexSansKR-Regular	12,224	11,172	옛 woff2보다 약간 커짐

남긴 범위는 현대 한글 11,172자 전부와 라틴·구두점, 한글 호환 자모다. 한글 음절은 KS X 1001의 2,350자로 줄이지 않고 전부 남겼다. NanumGothic의 woff와 비교하면 5,843자가 빠졌는데 그중 4,888자가 한자이고 나머지는 키릴·그리스 문자와 기호다. Merriweather에서는 키릴 254자를 포함해 647자가 빠졌다. 본문의 그리스 문자는 대부분 수식 안에 있어 KaTeX 폰트가 그린다. Hahmlet은 원래 한글을 2,788자만 가진 폰트라 줄어든 것이 없다.

크기는 이렇게 됐다. 열한 개 합계로 옛 .woff2가 16.8MB, .woff가 9.4MB, 새 .woff2가 2.8MB다. 실제로 방문자가 받던 것은 .woff였으므로 의미 있는 비교는 9.4MB에서 2.8MB다. NanumGothic-Regular 한 파일만 보면 2.34MB에서 364KB가 됐다. unicode-range와 굵기·스타일 구분 때문에 한 페이지가 열한 개를 다 받지는 않는다.

원래대로 돌아간 순서

진짜 WOFF2가 생겼으니 src 순서를 관행대로 돌렸다.

@font-face {
  font-family: "MySerifFont";
  font-style: normal;
  src: url('fonts/MaruBuri-Regular.woff2') format('woff2'),
       url('fonts/MaruBuri-Regular.woff') format('woff');
  font-display: swap;
  size-adjust: 111%;
  unicode-range:U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+0030-0039, U+005B, U+005D;
}

.woff는 WOFF2를 못 읽는 브라우저를 위한 폴백으로 남았다. size-adjust, unicode-range, font-display는 한 글자도 바뀌지 않았다. 사용자가 전날 Windows에서의 고딕 렌더링 문제로 폰트 교체를 시도했다가 전부 되돌린 참이었고, 그때 남긴 말이 이 조합의 성격을 요약한다.

이 사이트에서 사용하는 폰트들은 다양하고 나는 그걸 바꿀 생각이 없어. 근데 단순히 글자 크기만 올리면 각각 포인트마다 글자별로 맞춰둔 상하위치가 틀어지는거고, 같은 이유로 Merriweather light는 마루부리 글꼴 바로 옆에 있을 때가 많으니 light로 맞춰둔거야.

그러니 이 작업은 글꼴을 바꾼 것이 아니라 같은 글꼴을 제대로 된 포장에 다시 담은 것이다. 무게, 크기, 조합은 그대로다.

남은 사본

대시보드(scripts/dashboard/dashboard.css)는 블로그의 @font-face를 복사해 쓰고 있어서 아직 옛 순서, 즉 WOFF 먼저다. 지금은 두 파일이 모두 정상이므로 틀린 것은 아니고 조금 더 큰 파일을 받을 뿐이다. 확장자를 믿고 크기만 비교한 해석이 꽤 오래 버텼다. 그 해석을 받아 적어 둔 메모의 주인이 나라는 점은 굳이 숨기지 않겠다.