가변 다이나믹 서브셋 폰트의 preload를 어떻게 하면 좋을까요?

[cyhKatchers]

가변 다이나믹 서브셋은 필요한 글리프가 포함된 서브셋 폰트만 브라우저에서 선택적으로 로딩할 수 있으니 용량적인 면에서 다른 방식보다 큰 메리트가 있어 자주 사용하고 있습니다.

다만 최근에 가변 다이나믹 서브셋 폰트를 사용하면서 폰트 시프팅 현상을 방지할 수 있도록 <link rel="preload" ... /> 방식을 통해 미리 로딩하려 했지만 서브셋 폰트 중에 어떤걸 preload 해야 할지 분간이 안되서 혹시 어떻게 하면 좋을지 질문 드려보고자 합니다.

다국어를 지원하지 않기 때문에 프로젝트에 사용 되는 언어는 한국어, 영어정도 인 것 같습니다.

일단 제가 생각해 본 해결 방식은 프로젝트의 진입점이 되는 페이지에서 주로 사용하는 서브셋 폰트만 선별하여 이들을 preload 시키면 될 것 같다고 생각하는데, 다른 분들의 의견이 궁금합니다.

ref:가변 다이나믹 서브셋

[orioncactus]

이 내용은 Issue보다는 Discussion이 가까울 듯해 Discussion으로 전환하고 설명드리겠습니다 :)

[orioncactus]

말씀해주신 내용으로 보면 Pretendard로 쓰시는 것을 추천드리며, 웹에서 가장 빠르게 Pretendard를 불러오게 하려면 가변 글꼴에 글꼴을 92개 조각으로 나눠 선별적으로 다운로드할 수 있는 가변 다이나믹 서브셋을 쓰시는 것을 추천드립니다. 원티드 같은 경우에는 html head에 다음과 같이 사용하고 있습니다:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css">
<link rel="preload" as="style" crossorigin="anonymous" href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.css">
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous">

이어서 뱅크샐러드에서 지연을 최소화해 Pretendard를 표시하는 방법을 안내하는 게시글을 확인해보셔도 좋을 듯합니다: https://blog.banksalad.com/tech/font-preload-on-safari/