나눔 고딕 글꼴 웹폰트로 블로그 가독성 높이기 설정 적용시키기
| 블로그 팁 2010/08/29 23:13 |
최근 나눔고딕 글꼴로 웹폰트 설정을 통해 블로그 폰트를 수정하는 사람들이 속속들이 늘어나고 있는듯하다. 가독성을 위해서 바꾸는것이 대부분 블로거들의 생각이다. 필자 또한 기본 폰트인 굴림, 돋움체보다는 나눔고딕의 가독성이 높다는 느낌을 받아서 Connection Generator 블로그도 나눔고딕을 기본 서체로 설정하였다.
1. 나눔고딕 글꼴 설정 걸림돌
나눔고딕 글꼴의 설정은 스킨 수정 HTML/CSS 편집을 통해 쉽게 설정할 수 있다.
그러나 나눔고딕 글꼴의 설정에서의 문제점이 있다. Internet Explorer가 아닌 불여우, 크롬, 오페라 등의 IE가 아닌 브라우저에서 나눔고딕 글꼴을 제대로 표현하지 못한다는 문제점이 있다.
그러나 우리같은 블로거 몇명이 IE를 버리고 불여우, 크롬, 오페라 등을 사용한다고 하더라도 아직까지도 IE6에서부터 IE8까지 IE를 사용하는 사람은 여전히 많다.
그러나 나눔고딕 글꼴의 설정에서의 문제점이 있다. 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를 통해 더 많은 방문객들의 가독성을 높일 수 있다는 결론이 나왔다.
여기서도 알 수 있듯이 여전히 IE를 사용하는 사람들이 대다수이고, 이 때문에 Chrome과 Firefox에서 나눔고딕을 볼 수 없을지라도 IE를 통해 더 많은 방문객들의 가독성을 높일 수 있다는 결론이 나왔다.
3. 나눔고딕 글꼴 적용 결과
나눔고딕을 설정한 후에는 위의 포스트 내용처럼 기존의 굴림, 돋움체와 같은 기본 글꼴보다 보는 사람의 눈이 편한 느낌을 받으며, 가독성 또한 높아졌다고 느껴진다.
4. 나눔고딕 글꼴 웹폰트 적용으로 블로그 가독성 높이기(설정 방법)
※ 설정방법은 매우 간단하고 쉬우며 많은 시간을 할애하지 않아도 된다.
나눔글꼴은 애초에 웹폰트로서 파일이 존재하지 않는다. 그러나 WWW상에 수많은 사람들이 이미 변환 프로그램을 통해서 웹에서 사용가능한 상태로 변환하여 재배포하고 있기 때문에 변환을 직접해주는 수고는 하지 않아도 된다.
위 나눔고딕 웹폰트 파일을 다운로드 받아서 나눔고딕체를 설정하기 원하는 블로그의 스킨 파일 업로드 공간에 업로드한다.
업로드를 정상적으로 완료하였으면 업로드한 나눔고딕 글꼴의 경로는 블로그 내에서 images/NanumGothic.eot가 될 것이다.(티스토리 기준)
나눔고딕의 웹폰트 파일의 업로드를 끝냈다면 그다음으로 스킨- HTML/CSS 편집에서 style.css부분을 수정해주어야한다.
그 이후에는 스킨마다 다르지만, 본문, 메뉴, 방명록, 댓글 등에 설정되어있는 글꼴 설정에서 NanumGothic 글꼴로 설정을 바꾸어주면 된다.
나눔글꼴은 애초에 웹폰트로서 파일이 존재하지 않는다. 그러나 WWW상에 수많은 사람들이 이미 변환 프로그램을 통해서 웹에서 사용가능한 상태로 변환하여 재배포하고 있기 때문에 변환을 직접해주는 수고는 하지 않아도 된다.
위 나눔고딕 웹폰트 파일을 다운로드 받아서 나눔고딕체를 설정하기 원하는 블로그의 스킨 파일 업로드 공간에 업로드한다.
NanumGothic.eot업로드를 정상적으로 완료하였으면 업로드한 나눔고딕 글꼴의 경로는 블로그 내에서 images/NanumGothic.eot가 될 것이다.(티스토리 기준)
나눔고딕의 웹폰트 파일의 업로드를 끝냈다면 그다음으로 스킨- HTML/CSS 편집에서 style.css부분을 수정해주어야한다.
@font-face {font-family:NanumGothic; src:url(images/NanumGothic.eot);}
위 내용을 style.css 부분에서 가장위에 붙여넣기 한다.그 이후에는 스킨마다 다르지만, 본문, 메뉴, 방명록, 댓글 등에 설정되어있는 글꼴 설정에서 NanumGothic 글꼴로 설정을 바꾸어주면 된다.
'블로그 팁' 카테고리의 다른 글
| 달러화 약세에 따른 환율 하락! 애드센스 환전하자! (39) | 2011/07/17 |
|---|---|
| 구글 애드센스 수익! 웨스턴유니온 퀵캐쉬를 통해 송금받다 (16) | 2010/12/28 |
| 티스토리 카테고리 사이드메뉴 펼치기 설정 방법 (16) | 2010/09/20 |
| 애드센스(Adsense) 경쟁 광고 필터 효과 ! (17) | 2010/09/04 |
| 나눔 고딕 글꼴 웹폰트로 블로그 가독성 높이기 설정 적용시키기 (20) | 2010/08/29 |
| 티스토리 툴바:티스토리 로그인바 없애기 (10) | 2010/06/24 |
NanumGothic,
나눔고딕,
나눔고딕 글꼴,
나눔고딕 서체,
나눔고딕 설정,
나눔고딕 웹폰트,
나눔글꼴,
나눔서체,
네이버 글꼴,
네이버 나눔고딕,
웹폰트 설정,
웹폰트 설치,
웹폰트 적용
  |
CANTATA에 의해 창작되거나 옮겨진
"나눔 고딕 글꼴 웹폰트로 블로그 가독성 높이기 설정 적용시키기" 은(는) 본 블로그의 필자(CANTATA)의 허락에 의해서만 이용할 수 있습니다. Connection Generator의 저작물에 기초, 허락을 거쳐 저작물을 이용하고자 할 경우 허락은 http://ok-dj.com/에서 받을 수 있습니다.
|
트랙백 주소 :: http://ok-dj.com/trackback/141
-
Subject: Cantata의 생각
Tracked from ok____dj's me2DAY 2010/09/04 13:44 삭제나눔 고딕 글꼴 웹폰트로 블로그 가독성 높이기 설정 적용시키기 http://durl.me/2cv47
개인적인 의견이신데요.
나눔고딕은 실제 IE에서밖에 안보이는게 안타깝긴 하지만...
새벽 5시...ㅎ밤새셨네요?ㅎ
해피노리블로그에 요즘들어 자주 방문하고있습니다 ^ㅎ
앞으로도 좋은 포스트 부탁해요 ㅎ
단지 IE에서만 가능하다는..ㅎ
그래도 IE사용자는 여전히 많으니...누군가는 잘 보고있겠죠
저도 이거 적용하느라 얘좀 먹었지만 하고나니 정말 괜찮다는 생각이 듭니다.
눈이 편한 글꼴인듯합니다 ㅎㅎ
적용하는게 처음에 할때는 뭐가뭔지 모를수도있죠 !
스킨마다 다르지만, 본문, 메뉴, 방명록, 댓글 등에 설정되어있는 글꼴 설정에서 NanumGothic 글꼴로 설정을 바꾸어주면 된다라는 말에
급 좌절 하고 갑니다ㅡ.ㅜ
그렇게 어렵지 않아요..
몇줄 바꾸는거라..쉽죠
좋은 정보 잘보고 갑니다!! IE에서만 보여진다는게 참 안타깝네요!!
웹폰트좀 봐꺼 볼까 하다가, 나눔고딕이 괜찮아 보였는데 말이죠 ㅠ
즐거운 하루 마무리도 즐겁게 하세요 ~
나눔고딕은 참 괜찮은 글씨체네요 ㅎ
브라우저마다 다르니까 웹폰트 쓰기가 힘들겠어요.ㅠ 전 컴퓨터 쪽을 잘 알지 못해서 더 복잡해보이네요 ^^; 그런데 칸타타님은 레뷰인가 어딘가에서 군대에 계시다고 언뜻 본 거 같은데 어떻게 컴퓨터를 자주 하시나요~ 궁금해요 ㅎㅎ
그래서 입대전에 1일 1포스팅을 하려 노력했었던 것이..
물거품이 되어버렸죠..
귀찮아지거니와, 시간과 사회 소식에 늦을수밖에 ㅎ
하지만 많은 분들이 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 님이 소개해준 방법 안먹히네요;;
저만 안되는건가요 ㅠㅠ;;
맞구독했습니다^
크롬플러스 한번 써봐야겠네요 휴가나가면 ^ㅎ
다른 브라우저는 표준 웹 폰트인 OTF 및 TTF를 지원합니다.