폰트픽웹사이트에 한글 폰트를 얹는 것은 영문 폰트를 얹는 것과 사정이 다릅니다. 영문은 글자가 백 개 남짓이지만 한글은 만 개가 넘습니다. 폰트픽이 서비스하는 한글 폰트를 직접 재어 보니 굵기 하나가 압축하지 않은 상태로 0.5~2.3메가바이트였습니다. 굵기를 여러 개 쓰면 그만큼 배가 되고, 그대로 올리면 첫 화면이 그만큼 늦게 뜹니다.
1. woff2 로 바꾸세요
가장 먼저 할 일입니다. TTF나 OTF를 그대로 올리는 것과 woff2로 바꿔 올리는 것은 용량이 크게 차이 납니다. 위 그림의 KoPub돋움은 980KB에서 225KB로, 4분의 1 아래로 줄었습니다. 글자는 하나도 빠지지 않았습니다. 요즘 브라우저는 모두 woff2를 읽습니다.
2. 서브셋 — 필요한 글자만 남기기
더 줄이려면 쓰지 않는 글자를 덜어냅니다. 이걸 서브셋이라고 합니다. 효과는 확실하지만 두 가지를 조심하셔야 합니다.
글자가 빠집니다
당연한 말 같지만 실제로 자주 사고가 납니다. 이용자가 입력하는 자리에 서브셋 폰트를 쓰면 예상 못 한 글자가 조용히 사라집니다. 폰트픽에서도 미리보기용으로 구운 서브셋 파일이 올라가 있던 폰트가 있었습니다. 화면에 잘 나오는 것처럼 보여서 한동안 몰랐습니다. 없는 글자는 네모가 아니라 빈자리나 다른 서체로 나오기 때문입니다.
라이선스와 부딪힐 수 있습니다
서브셋은 폰트 파일을 고치는 일입니다. 수정 금지인 폰트에서는 이 작업 자체가 문제가 될 수 있습니다. 오픈 폰트 라이선스라면 자유롭지만, 수정을 막아 둔 폰트라면 원본 그대로 올리시거나 배포처에 확인하세요.
3. 오래된 폰트는 다시 구워야 할 때가 있습니다
배포된 지 오래된 TTF 중에는 글자 지도(cmap)가 옛 방식으로 들어 있어, 그대로 웹폰트로 바꾸면 브라우저에서 글자가 안 나오는 것이 있습니다. 파일은 멀쩡한데 화면만 비는 식이라 원인을 찾기 어렵습니다. 이럴 때는 폰트 도구로 다시 구우면 해결됩니다.
4. CDN 웹폰트는 파일을 손에 넣기 어렵습니다
구글 폰트처럼 CDN으로 제공되는 한글 웹폰트는 글자 범위를 수백 조각으로 나눠 필요한 것만 내려받게 되어 있습니다. 화면에는 잘 나오지만 파일 하나를 통째로 얻기는 어렵습니다. 폰트 파일 자체가 필요하다면 CDN이 아니라 제작사의 공식 배포 페이지에서 받으셔야 합니다.
5. font-display 를 지정하세요
폰트를 내려받는 동안 글자를 감출지 대체 폰트로 먼저 보여 줄지 정하는 설정입니다.
지정하지 않으면 브라우저에 따라 몇 초간 글자가 아예 안 보일 수 있습니다.
font-display: swap을 넣으면 기본 폰트로 먼저 보여 주고 준비되는 대로
바뀝니다.
정리
- woff2로 바꾸는 것만으로도 대부분 해결됩니다
- 서브셋은 효과가 크지만 글자 누락과 라이선스를 확인하세요
- 이용자 입력이 있는 자리에는 완성형 전체를 담은 폰트를 쓰세요
폰트마다 수록 글자와 수정 허용 여부는 상세페이지의 소개문과 라이선스 요약에 적어 두었습니다.