웹폰트는 절대 "경량화"버전 (한글 완성형 2,350자) 쓰면 안됩니다

한글이 용량이 너무 커서 저런 경량화버전을 쓰곤 하는데

문제는 저런걸 쓰면 표현을 못하는 글자들이 많습니다

예컨대 jsdelivr에 등록된 노토산스는 "아햏햏"에서 "햏"자를 표시 못합니다;;;

그리고 역시 jsdelivr에 있는 나눔바른고딕 경량화버전은 "웈" 이라는 글자를 표시하지 못하더군요

누가 저런걸 쓰냐고 하는데.. 커뮤니티 운영하다 보면 별 희한한 단어들이 다 나옵니다

참고로 "웈"이라는 단어는 누가 "현우"라는 사람 이름에 웃기다는 뜻의 "ㅋㅋㅋ"을 연달아 입력해서 "현웈ㅋㅋ" 라는 문장을 입력할 때 나온 단어입니다

그러면 어떻게 해야 하느냐... 솔직히 가장 좋은 해결책은 한글은 웹폰트를 안 쓰는거 같네요

영어는 수십KB밖에 안되는데 한글은 작아도 1메가를 넘어가고 위에서 말한 노토산스나 나눔바른고딕은 2~3메가를 넘어갑니다

너무 용량이 커서 너무 비효율적인 거 같네요

그래도 디자인때문에 꼭 필요하다면, 최소한 모바일에서는 로딩하지 않도록 해야 합니다

모바일 네트워크에서 다 받으면 5~6MB 내외인 웹폰트를 다운받았다간...

(어차피 모바일 기기들은 각자 기기에서 제일 깔끔하게 보이고 가독성이 높은 폰트들을 내장하고 있어서 굳이 필요 없습니다)

웹폰트를 별도의 webfont.css 파일로 만들고, layout.html 최상단에 load 구문으로 불러온 다음 그걸 모바일 에이전트+cond 구문으로 둘러싸면 됩니다.

이런 식으로 씁니다.

그리고 웹폰트 css파일에는 cdn에 있는 css파일을 import하지 말고, 직접 font-face 구문을 이용해서 홈페이지에서 필요한 파일들만 올려놔야 합니다.

ie 같은 경우는 심지어 오프라인에 폰트가 있는 경우라도 올라와 있는 웹폰트를 전부 다운받는다고 하더군요. 그리고 css import보다 직접 font-face로 써놓는 것이 더 빠르다고 들었습니다.

+

나눔바른고딕 쓰는 분들 꽤 계실텐데(xedition도 나눔바른고딕이더군요) 이것만 쓰면 영문/숫자 등이 상당히 못생겼습니다. 그래서 앞쪽에 영문폰트를 따로 하나 더 추가해주는 게 좋은데

xedition은 Open Sans를 쓰더군요

그런데 이게 문제가 있는데... 특수기호 중에 ~ 자가 - 자로 보이는 현상이 있습니다

혹시 폰트 크기에 따라 안 나타날 수도 있고 확대 비율에 따라서도 다른데, 제 사이트에서는 브라우저 확대비율이 100%일때 무조건 -자로 보이더군요

살펴보면 ~ 자의 물결 굴곡이 매우 낮은 걸 알 수 있습니다

그래서 다른 폰트들을 찾아 나섰는데, 여러가지 적용해본 결과 Roboto 폰트가 특수기호도 깔끔하면서 나눔바른고딕에 매우 잘 어울리더군요

사람마다 다르게 생각할 수는 있어도 제가 볼땐 Open Sans보다도 더 잘 어울리네요

나눔고딕 계열 쓰신다면 Roboto도 같이 적용하고 font family에 Roboto-나눔고딕 순으로 적용해보시길