Tossface subset 폰트 제공관련

[bhyoo99]

안녕하세요 토스페이스 개발자/디자이너 여러분
이번에도 이슈로 인사드리지만, 건강한 이슈와 피드백은 더 좋은 프로덕트로 이어진다는 개인적인 생각을 가지고 있어서 주저하지 않고 가지고 왔습니다!

다름 아니라, 제공해주신 tossface ttf 폰트를 웹에서 사용할때는 전혀 문제가 없다가,
모바일 웹으로 접근해보니 폰트용량이 커서 먼저 기본 이모지가 출력되었다가, 이후에 폰트 로딩이 끝나면 정상적으로 출력됩니다.

이해하기 쉽도록 아래 영상을 함께 첨부드립니다 :)
https://github.com/toss/tossface/assets/62757768/5d8cf94a-6ce4-4fdc-ab05-6788cc2fc772
페이지 로딩후 -> 글자 출력 -> 토스페이스 적용의 순서이며,
네트워크 인스펙터를 찍어보니 폰트로딩에 꽤 많은 시간을 쓰더라구요

이런 고퀄리티, 고용량 폰트를 사용하기 위해서 google에서는 subsetting이라는 걸 진행하는데,
https://fonts.google.com/knowledge/glossary/subsetting
이 기술이 적용되면, 웹에서 특정 폰트만 동적으로 가져올 수 있게 됩니다. 그러면 폰트 로딩이 더욱 빨라질 것 같습니다!

폰트 로딩과 관련해서 더 좋은 의견 있으시다면 댓글 부탁드립니다!

ps. 위 이슈가 현실적으로 당장 해결되기 힘들다면 토스페이스 홈페이지에서 사용중이신 otf도 공식으로 깃허브에 공유부탁드립니다. 용량차이가 2배 나서요 ㅠㅠ

[sudosubin]

안녕하세요, 먼저 토스페이스에 관심 가져주셔서 감사합니다 :)

Tossface는 말씀해주신 것처럼 매우 많은 종류의 이모지 서체를 제공하기 때문에 폰트 파일의 용량이 큰 편인데요, 내부적으로 빠르게 논의해 Tossface 폰트에 대한 subsetting을 진행했습니다.

toss/[email protected]에 현재 약 12개의 unicode-range로 분리된 내용이 반영되어 있으니 참고 부탁드립니다.

jsDelivr CDN 캐시에 대한 purge를 진행했지만 즉시 반영이 되진 않고 최대 7일 정도 캐시가 유지될 수 있습니다. 더 빠르게 subsetting 된 Tossface를 사용하고 싶으시다면, Tossface의 버전을 잠시 pinning 하여 https://cdn.jsdelivr.net/gh/toss/[email protected]/dist/tossface.css로 사용하실 수 있을 것 같습니다.

좋은 의견 제안해주셔서 감사드립니다. 🙇