최근 나눔고딕 글꼴로 웹폰트 설정을 통해 블로그 폰트를 수정하는 사람들이 속속들이 늘어나고 있는듯하다. 가독성을 위해서 바꾸는것이 대부분 블로거들의 생각이다. 필자 또한 기본 폰트인 굴림, 돋움체보다는 나눔고딕의 가독성이 높다는 느낌을 받아서 Connection Generator 블로그도 나눔고딕을 기본 서체로 설정하였다.


1. 나눔고딕 글꼴 설정 걸림돌

나눔고딕 글꼴의 설정은 스킨 수정 HTML/CSS 편집을 통해 쉽게 설정할 수 있다.
그러나 나눔고딕 글꼴의 설정에서의 문제점이 있다. Internet Explorer가 아닌 불여우, 크롬, 오페라 등의 IE가 아닌 브라우저에서 나눔고딕 글꼴을 제대로 표현하지 못한다는 문제점이 있다.
그러나 우리같은 블로거 몇명이 IE를 버리고 불여우, 크롬, 오페라 등을 사용한다고 하더라도 아직까지도 IE6에서부터 IE8까지 IE를 사용하는 사람은 여전히 많다.

 
2. 블로그 방문자 브라우저 사용 현황


Google Analytics (https://www.google.com/analytics)를 통해 필자의 블로그 Connection Generator를 방문해주는 방문객들의 트래픽을 분석한 결과이다. IE가 94.25%로 타 브라우저와 비교도 할 수 없을 정도로 점유를 하고 있으며, 그 뒤를 Chrome이 3.18%, Firefox가 1.81%로 뒤따르고 있다.
여기서도 알 수 있듯이 여전히 IE를 사용하는 사람들이 대다수이고, 이 때문에 Chrome과 Firefox에서 나눔고딕을 볼 수 없을지라도 IE를 통해 더 많은 방문객들의 가독성을 높일 수 있다는 결론이 나왔다. 


3. 나눔고딕 글꼴 적용 결과


나눔고딕을 설정한 후에는 위의 포스트 내용처럼 기존의 굴림, 돋움체와 같은 기본 글꼴보다 보는 사람의 눈이 편한 느낌을 받으며, 가독성 또한 높아졌다고 느껴진다.


4. 나눔고딕 글꼴 웹폰트 적용으로 블로그 가독성 높이기(설정 방법)

※ 설정방법은 매우 간단하고 쉬우며 많은 시간을 할애하지 않아도 된다.

나눔글꼴은 애초에 웹폰트로서 파일이 존재하지 않는다. 그러나 WWW상에 수많은 사람들이 이미 변환 프로그램을 통해서 웹에서 사용가능한 상태로 변환하여 재배포하고 있기 때문에 변환을 직접해주는 수고는 하지 않아도 된다.
위 나눔고딕 웹폰트 파일을 다운로드 받아서 나눔고딕체를 설정하기 원하는 블로그의 스킨 파일 업로드 공간에 업로드한다.

업로드를 정상적으로 완료하였으면 업로드한 나눔고딕 글꼴의 경로는 블로그 내에서 images/NanumGothic.eot가 될 것이다.(티스토리 기준)

나눔고딕의 웹폰트 파일의 업로드를 끝냈다면 그다음으로 스킨- HTML/CSS 편집에서 style.css부분을 수정해주어야한다.
@font-face {font-family:NanumGothic; src:url(images/NanumGothic.eot);}
위 내용을 style.css 부분에서 가장위에 붙여넣기 한다.
그 이후에는 스킨마다 다르지만, 본문, 메뉴, 방명록, 댓글 등에 설정되어있는 글꼴 설정에서 NanumGothic 글꼴로 설정을 바꾸어주면 된다.

CANTATA에 의해 창작되거나 옮겨진 "나눔 고딕 글꼴 웹폰트로 블로그 가독성 높이기 설정 적용시키기" 은(는) 본 블로그의 필자(CANTATA)의 허락에 의해서만 이용할 수 있습니다.
※ 본 블로그 포스트의 무단전재 및 재배포를 금지합니다.
FACEBOOK 디지털자키닷컴 페이지의 좋아요를 통해 디지털자키닷컴를 구독하시면,
FACEBOOK으로 “디지털 라이프를 들려주는 사람의 이야기”을 받아보실 수 있습니다.

    • 아녜요.괜찮아요
      개인적인 의견이신데요.
      나눔고딕은 실제 IE에서밖에 안보이는게 안타깝긴 하지만...
      새벽 5시...ㅎ밤새셨네요?ㅎ
      해피노리블로그에 요즘들어 자주 방문하고있습니다 ^ㅎ
      앞으로도 좋은 포스트 부탁해요 ㅎ
  1. IE 전용이라는점을 제외하면...가독성좋은 폰트지요
  2. 나눔글꼴 정말 가독성 하나는 끝내주더군요~ㅎㅎ
    저도 이거 적용하느라 얘좀 먹었지만 하고나니 정말 괜찮다는 생각이 듭니다.
  3. 나눔고딕 적용하고 싶은데...
    스킨마다 다르지만, 본문, 메뉴, 방명록, 댓글 등에 설정되어있는 글꼴 설정에서 NanumGothic 글꼴로 설정을 바꾸어주면 된다라는 말에
    급 좌절 하고 갑니다ㅡ.ㅜ
  4. 저는 웹폰트 설정으로 나눔고딕이 안 보이는 브라우저는 관심등에 두지 않게 되요. 우리나라는 IE 사용자가 워낙 많다보니 그런것 같아요.
  5. 안녕하세요!! 칸타타님 ㅎㅎ

    좋은 정보 잘보고 갑니다!! IE에서만 보여진다는게 참 안타깝네요!!

    웹폰트좀 봐꺼 볼까 하다가, 나눔고딕이 괜찮아 보였는데 말이죠 ㅠ

    즐거운 하루 마무리도 즐겁게 하세요 ~
  6. 블로그 방문 감사합니다.
    브라우저마다 다르니까 웹폰트 쓰기가 힘들겠어요.ㅠ 전 컴퓨터 쪽을 잘 알지 못해서 더 복잡해보이네요 ^^; 그런데 칸타타님은 레뷰인가 어딘가에서 군대에 계시다고 언뜻 본 거 같은데 어떻게 컴퓨터를 자주 하시나요~ 궁금해요 ㅎㅎ
  7. 가독성 관련 글을 찾다가 이 글로 들어왔습니다.
    하지만 많은 분들이 IE에서만 지원을 한다고 알고 계시는데
    CSS3 @font-face를 이용하여 다른 브라우저도 다 지원가능합니다 ^^
    해당 글꼴(ttf, eot 둘 다)을 웹에 올려 놓고
    @font-face{ font-family:ngttf; src:url(NanumGothic.ttf);}
    @font-face{ font-family:ngeot; src:url(NanumGothic.eot);}
    body, input, textarea, select, button{ font-family:NanumGothic, 맑은고딕, ngttf, ngeot;}
    이런식으로 선언해주시면 됩니다 :)

    도움이 되셨기를 ~ ^^
    • 괜찮은 정보감사합니다.
      어떠한 방법으로서 타브라우저도 지원가능하다고 알고있었는데...
      문제는 타 브라우저에 설정시 블로그 로딩이 느려진다는 소문!? 을 들었네요ㅎ
      사실인지 궁금하네요
    • 일년 전 댓글이라 확인 하실지 모르겠지만...
      mooki83 님이 소개해준 방법 안먹히네요;;

      저만 안되는건가요 ㅠㅠ;;
  8. 크롬플러스 댓글보고 방문하였는데 좋은글있어 보고갑니다. 다음뷰구독하였네요. 맞구독부탁드려요ㅎㅎ
  9. IE가 표준 웹폰트 확장자인 OTF를 지원하지 않고 독자적으로 EOT를 지원하는 것입니다.
    다른 브라우저는 표준 웹 폰트인 OTF 및 TTF를 지원합니다.
  10. 거래처에서 노후된 컴퓨터를 보니 확실히 웹폰트가 아니면 이상하게 나오던데 아직도 기술이 부족한지 적용하기가 힘드는군요....자료 잘보았습니다
  11. http://einmong.egloos.com/5415221
    타 브라우저에서도 웹폰트 사용 가능합니다!
    eot가 ie 전용 웹폰트 포맷이라 안나오는 것 뿐이죠^^