본문 바로가기

웹폰트 추천 Noto Sans Kr 간략한 적용 방법

DESIGN/폰트 2018. 2. 9.

최근 홈페이지를 관리하면서 나눔스퀘어를 웹폰트로 만들어서 사용을했었다. 물론 나눔스퀘어를 최근 가장 자주 쓰기에 웹폰트로 적용해서 사용하였는데, 한 가지 단점이 존재했다. 


웹폰트라 함은 용량 크기를 생각 안할 수 없다. 그러하기에 나눔스퀘어를 볼드 및  extra bold 했을때 따로 만들지 않고서야 볼드체를 사용하기가 힘들었다는 단점이 존재 한다.

나눔스퀘어 볼드도 만들면 되지만 그다지 가치가 있어 보이지 않는다. 


그래서 찾은 것이 구글에서 제공하는 Noto Sans KR 일명 본고딕 KR 에디션 정도 되겠다. 

Noto Sans체는 CJK로 불리우는데 이게 차이나, 제팬, 코리아의 폰트를 묶어서 만든것이다. 거기에서 KR만 추려 만든것이 Noto Sans Kr로 보면 된다. 그래서 제법 가볍게 잘 적용이 된다. 


가장 좋은 점인 font-weight를 통한 볼드체를 조정할 수 있다. (이게 포인트) 또한 가독성도 나쁘지 않다.


요즘 인터넷이 얼마나 빠른데 웹폰트 용량 생각하느냐? 빠른 만큼 이미지의 용량도 높아지고 표현영역도 많아 짐으로서 사이트의 속도가 느려질 수 있다. 간과하고 넘어갈 부분은 아닌듯하다. 


그리고 사용자의 모바일 LTE 사용량을 생각한다면 필히 용량에 신경써주시길 바란다. 개발자가 램 쪼이는 정도는 아니겠지만 그래도 조금 신경을?


그래서 어떻게 적용하느냐? 복잡한것 없다. 그냥 구글 서버에 있는거 긁어와서 사용하면 된다.

적용 방법은 어떻게 되는가? 간단하다. 

CSS 스타일 시트에 

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

넣고 적용하고 싶은 곳 혹은 전체 font-family:

font-family: 'Noto Sans Kr', sans-serif;

적용해 주면 된다.  폰트의 두께 조절 가능 및 적은 용량 그리고 높은 가독성의 웹폰트를 원한다면 

Noto Sans Kr 폰트를 사용하길 바란다. 끝.



댓글