나눔스퀘어체 웹폰트 블로그 사용후기

Edited by Leun Kim

네이버 “한글한글아름답게” 프로젝트에서 이번에 “나눔스퀘어체”를 또 출시했다. 나눔 스퀘어체는 반듯한 직선들로 이루어진 고딕체이며 제목으로 사용할 때 잘 어울리고 모바일에서도 잘 보이는 글꼴이라고 소개하고 있다. 거기다 웹 폰트에서 상당히 중요한 요소인 용량이 기존의 나눔바른고딕이나 나눔고딕의 1/5로 줄어들었다! 꼭 필요한 2,350자만 추렸다고 하는데…
 
나눔스퀘어 체 웹폰트 사용후기
WOFF로 변환된 나눔 스퀘어체의 용량이 줄어든 모습

필자의 워드프레스(WordPress) 블로그에 적용하고 있던 기존의 나눔바른고딕(Nanum Barun Gothic) WOFF 파일이 2MB인데 비해 이번에 적용한 나눔 스퀘어체(Nanum Square)의 용량은 400KB 정도로 1/5이나 줄었다 ㅎㄷㄷ. 여기에서 나눔 스퀘어체 설치하기를 통해 윈도우용 TTF파일 혹은 OTF파일을 설치하고 TTF나 OTF 폰트를 웹에 최적화된 WOFF폰트로 변환시켜 주는 사이트(여기)에서 변환시켜 주면 된다. 네이버에서는 나눔스퀘어R과 볼드체인 나눔스퀘어B 2가지를 제공하는데 필자는 일단 나눔스퀘어R만 적용했다. 볼드체는 블러 효과가 있긴 하지만 블로그 초기로딩 용량을 최소화하기 위해 그냥 Strong태그를 이용…
 
이 블로그에 적용하고 한 번 비교해 봤다:
 

나눔스퀘어 체 웹폰트 사용후기
나눔바른고딕 레귤러 폰트
 
나눔스퀘어 체 웹폰트 사용후기
나눔스퀘어 레귤러 폰트

전체적으로 나눔스퀘어 폰트가 나눔바른고딕에 비해 얇아졌다. 고딕체 가독성이야 거기서 거기인 것 같고 사실 큰 차이가 없는 것 같다. 그러므로 필자는 용량이 1/5인 나눔스퀘어체를 취하고 나눔고딕류를 버리기로 했다.
 

나눔스퀘어 체 웹폰트 사용후기 썸네일

 
일단 위 방법대로 WOFF형식의 폰트로 무사히 변환했다면 블로그에는 CSS파일 수정을 통해 폰트를 적용할 수 있다. 예를 들어 CSS에서 다음과 같이 폰트페이스(Font Face)를 이용하여

를 추가하고, 블로그의 모든 곳에 다음과 같이

불러와 주면 된다.

 

 
I was born and raised in Daegu, S. Korea. I majored in electronics and math in Seoul from 2007 to 2012. I've had a great interest in math since freshman year, and I studied PDE in Osaka, Japan from 2012-2014. I worked at a science museum and HUFS from 2014 in Seoul. Now I'm studying PDE in Tokyo, Japan. I also developed an interest in music, as I met a great piano teacher Oh in 2001, and joined an indie metal band in 2008. In my spare time, I enjoy various things, such as listening music, blogging, traveling, taking photos, and playing Go and Holdem. Please do not hesitate to contact me with comments, email, guestbook, and social medias.



5 comments

  • 나눔 고딕체가 좀 무거웠나 보군요. 제 블로그는 아직 워낙 데이터가 적어서 버겁다는 느낌을 못 받고 있었어요. 나눔고딕과 나눔’바른’고딕은 다른가요? 제 블로그 고딕 폰트보다는 조금 두꺼워도 보이기도 하고요. 구글 웹 폰트 살펴보고 ‘스퀘어’ 폰트로 수정하려 했는데, 아직 업데이트가 안 되었네요. 저는 조금 기다렸다가 바꿔야겠어요. 나눔고딕체 때만 해도 눈이 살 것 같더니 아직 더 개선될 여지가 있군요^^

  • 워드프레스에서 나눔스퀘어를 적용시키려고 하는데… 영문은 잘 적용되지만 한글만 쓰면 기본 폰트로 나와버리네요. ㅜㅜ; style.css 에도 수정하고.. 폰트도 잘 업로드 시켰는데….. 무엇이 문제일까요 ㅜㅜ……..

  • 안녕하세요 좋은 포스팅 감사합니다.저도 한번 따라해보려 하는데 WOFF로 변환한 파일을 어떻게 업로드 해야되는지 잘 모르겠네요. Media Library에서 업로드해보려 했는데 보안상의 문제로 불가능 하다고 합니다. 어떻게 해결해야 하나요?둘째로 나눔 스퀘어를 적용하면 기존의 영문폰트는 지워주는게 좋나요?미리 감사드립니다 :)