Wix, 한글 폰트 로딩속도 빠르게. 웹폰트 최적화 어떻게 할까 고민되네

Wix 단점에 대해서 구글링을 해보면... 한글 폰트를 통째로 로딩하느라 시간을 많이 잡아먹는다는 이야기를 종종 볼 수 있습니다만... 웹폰트 최적화는 티스토리 블로그 스킨처럼 Front-End 분야를 다루시는 분들이라면 누구나(?) 한번쯤은 하게 되는 고민일 것입니다.

 

https://velog.io/@vnthf/웹폰트-최적화-하기

https://boramyy.github.io/dev/front-end/etc/font/

웹페이지 구축으로 밥먹고 사는 분들께서 남겨주신 글을 (감사하게) 받아먹으면서, 능력껏 하나라도 적용하다 보면 Wix 홈페이지 한글 폰트 속도 문제도 어느 정도 극복할 수 있지 않을까요?

 

 

HTML, CSS, JavaScript를 자유롭게 다룰 수 있는 환경이라면 위에 남긴 웹폰트 최적화 방법 설명 문서가 많은 도움이 될 것입니다만, Wix는 HTML / CSS / JavaScript를 사용자가 밀어넣을 수 없는 구조라... 포기해야만 할까요? 아닙니다. 위 문서에서 개념만이라도 익히면 길이 보일 겁니다.

 

1. 시스템에 설치되어 있다면 폰트를 다운로드 하지 않음(SSD 속도가 인터넷 속도보다 빠르니까.)

2. 압축된 폰트 형식을 사용(woff / woff2 등)

3. unicode 범위(unicode-range)를 정해놓고, 해당 속성에 일치하는 글자를 렌더링하는 순간에 웹폰트 다운로드 함.

4. 불필요한 문자 범위를 없앤 "서브셋 폰트(경량화 폰트)"를 웹폰트로 사용

 

웹폰트 로딩 속도는 폰트 파일 크기와 관련이 있다고 하는데요,

 

SVG 폰트

EOT(Embedded OpenType)

TTF(True Type Font) / OTF(OpenType Font)

WOFF(Web Open Font Format)

WOFF2(WOFF보다 30%~50% 정도 더 작은 용량)

 

WOFF2 > WOFF > TTF > EOT > SVG 순으로 로딩 속도가 빠르다고 합니다. WOFF2 파일의 용량이 가장 작다는 뜻.

 

▼ 실제로 Noto Serif KR 이라는 이름의 구글 폰트(otf)를 다운로드 받아 보면 7MB가 넘는 용량인데, woff로 경량화된 폰트를 수소문해서 받아보면 400kb 수준으로 많이 줄어 있는 것을 확인할 수 있습니다.

 

▼ 요즘은 woff2 파일 지원도 좋아져서, 한국 인터넷 환경에서도 불편함 없이 쓸 수 있을 것으로 예상하네요. (ie는 전세계 점유율 1% 대입니다. 버리고 가지요.)

 

아무튼, Wix에서 동원할 수 있는 폰트 최적화 방법은 경량화 폰트 사용, woff/woff2 확장자 폰트 사용 정도밖에는 없는 것 같습니다.

검색 열심히 해서 구하거나, 직접 제작하거나. => PC 페이지에서 찌글찌글하게 렌더링되는 문제를 해결하는 데에도 도움이 될 것입니다. 저는 명조체가 비트맵 글꼴처럼 찌글찌글하게 나오는 것을 Noto Serif KR 폰트 사용으로 해결했네요.