요전까지는 나눔고딕과 맑은 고딕을 사용했는데 지금은 렉시새롬 웹폰트를 사용하니 아래 글은 오래전에 적었고 제가 블로그 수정을 많이 하므로 맞지 않습니다. 왜 전에 맑은 고딕은 사용했냐면 맑은 고딕은 윈도우7에서 기본 글꼴이기 때문입니다. 윈도우 7이면 모든 사람이 가지고 있고 나눔고딕인 경우는 다운받은 사람만 있기 때문입니다. 

들어가기 전에

많은 사람들이 제 블로그에서는 어떤 폰트를 쓰는지 궁금해 했는데  답은 나눔고딕입니다. 저의 블로그를 볼 때 여러분이 나눔고딕이 없으면 맑은 고딕으로 나타나게 하고,맑은 고딕도 없으면 굴림으로 보이실 것입니다. 여러분이 반드시 알아야 할 것은 여러분이 아니라 상대방이 나눔고딕이 있어야 나눔고딕으로 보이고 없다면 윈도우 7과 Vista의 기본글꼴은 나눔고딕과 비슷한 맑은 고딕으로 보이고 윈도우 XP에서는 굴림이 무조건 있으므로 굴림으로 보이게 설정이고 윈도우 XP 아래의 버전은 고려하지 않았습니다. 그리고 PC방에서 저의 블로그를 보신다면 익스플로러에서 보이는 EOT 웹폰트를 사용하여 나눔고딕으로 보일 것입니다. 이것을 정리하면 아래와 같습니다.

  • 나눔고딕이 없을 때 : 맑은 고딕이나 굴림으로 
  • 맑은 고딕이 기본폰트인 윈도우 7이나 비스타에서 나눔고딕이 없을 때 : 맑은 고딕
  • PC 방 등에서 익스플로러를 사용할 경우 : EOT 웹폰트(즉 나눔고딕 웹폰트)

★ 여러분이 아닌 상대방이 나눔고딕을 컴퓨터에 설치됐냐에 따라 블로그가 보이는 것이  다릅니다. 자신은 나눔고딕으로 보이는데 다른 곳에서는 나눔고딕으로 안 보인다고 하지마세요. 그리고 상대방과 내가 블로그를 같은 폰트로 보는 것은 돋움이나 굴림인 것 같운대 기본설정인 돋움보다 굴림이 제가 보기에는 좋습니다.★

나눔고딕과 맑은 고딕 다운로드

  • 나눔고딕은 무료 글꼴로 네이버에서 만들었는데 http://hangeul.naver.com/share.nhn에서 받는데 나눔글꼴(나눔손글씨)이라고 나눔딕이 없는 것이 아니라 나눔고딕은 나눔글꼴에 포함됐으며 자신의 컴퓨터가 윈도우라면 TTF 윈도우용 설치하기을 누르시면 되고 맥이면 OTF 맥용설치하기 버튼을 누르시면 됩니다.
  • 맑은 고딕 다운로드 : http://durl.me/52zcs (윈도우 7과 윈도우 Vista는 다운로드 받을 필요없습니다.)

블로그를 나눔고딕만들어 보기

현재 제 블로그에서 여러분이 보고 있는 폰트는 나눔고딕이라고 할 수 있습니다. 나눔고딕으로 안 보이는 경우는 이 글 들어가기 전에 설명들였고 나눔글꼴을 적용하는 것에 대해 설명드리겠습니다.

티스토리의 기본 스킨인 아래 그림의 BASIC 2008 스킨으로 설명할 것인데 티스토리 관리의 스킨 목록에 있는 티스토리에서 추천하는 스킨은 큰 어려움이 없을 것 같으나  목록에 없는 스킨을 사용하신다면 어려움이 많을 것 같습니다.



1. 블로그 타이틀, 글제목, 글내용, 사이드바 일부분과 티에디션 일부에 나눔고딕 적용

블로그 타이틀(제목),글제목,글내용, 사이드바의 일부를 나눔고딕으로 해 보겠는데, 일반적으로 글제목과 글내용을 나눔고딕으로 설정하면 티에디션으로 만든 첫페이지의 일부는 자연히 나눔고딕으로 됩니다. 저의 첫페이지에서 나눔고딕이 적용안된 폰트는 제가 일일히 적용했지만요. 그것에 대해서는 복잡해서 설명하지 않겠습니다.그러면 시작해 보겠습니다.

참고로 아래 코드를 복사하기 위해 코드에 마우스 포인터를 올린 후 아이콘이 4개 나타나면 왼쪽에서 두번째 아이콘을 클릭하면 아래 것이 복사한 후 아래 목록대로 합니다.
NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Gulim, 굴림,

  • 관리(ADMIN)을 클릭해서 스킨 메뉴의  HTML/CSS 편집으로 들어간 후 나오는 페이지는 위의 사각형은  skin.html이고 아래 사각형은 style.css를 인데 이제는 위의 사각형은 잊으시기 바랍니다. 아래 사각형에서 body를 찾아 아래 그림처럼 Dotum앞에 NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Gulim, 굴림, 을 삽입하여 아래 그림과 같이 합니다.


저장 버튼을 누른 후 스킨 메뉴에서 스킨 선택을 선택하고 스킨 위자드 버튼을 누르고 아래 순서대로 합니다. 참고로 코드에 울렁증이 있다면 스킨 위자드가 있는 스킨이 수정에 편할 것입니다.
  1. 타이틀텍스트를 눌러 글꼴을 기본값으로 합니다.
  2. 게시글을 선택해 아래 그림처럼 글꼴을 모두 기본값으로 하고 적용 버튼을 누릅니다. 많은 분이 의도적으로 한 지 몰라도 제목 글꼴을 기본값으로 해야 글의 제목도 나눔고딕이 됩니다. 


위와 같이 하면 이렇게 하면 블로그 타이틀,글 제목,글내용,사이드바 일부,티에디션의 일부가 나눔고딕으로 되고 자신의 아닌 상대방이 컴퓨터에 나눔고딕이 없으면 맑은고딕으로 보이고  맑은 고딕이 없으면 굴림으로 보이게 됩니다.

2. 블로그 메뉴를 나눔고딕으로

아래 그림의 사각형 박스가 블로그 메뉴인데 기본 설정으로 굴림으로 된 것을 나눔고딕으로 해 보는 것입니다. 아래 그림에서 블로그 타이틀은 나눔고딕으로 된 것이 보이실 것입니다.


Ctrl+F로 blogmenu li a를 찾은 후 font-family: gulim;을 지우면 아래같이 되는데 설정이 굴림(gulim)으로 된 것을 지워 나눔고딕으로 되게 하는 것입니다. 참고로 스킨에서 블로그 메뉴를 blogmenu라고 사용하니 이것을 알아 두세요.



2. 페이지끝이 메뉴와 저작권(카피라이트) 부분을 나눔고딕으로

아래 그림처럼 블로그 아래에 있는 블로그 메뉴카피라이트(저작권) 문구를 기본설정인 Verdana대신 나눔고딕으로 해 보겠습니다.


블로그 메뉴와 카피라이드(저작권) 문구를 설정하는 부분은 footer에 있으니 Ctrl+F로 footer를 찾아 아래처럼 합니다. 참고로 페이지의 마지막은 footer라 하고 카피라이트는 copyright라고 합니다.
  1. font:11px Verdana, dotum에서 Verdana, dotum을 지우면 아래 그림의 첫번째 빨간사각형처럼  font:11px로 되게 합니다.
  2.  font: 11px dotum 부분을  dotum을 지워 font: 11px 으로 하면 아래 그림처럼 되고  1,2번을 적용하기 위해서는 저장 버튼을 누릅니다.



3.사이드바의 메뉴 나눔고딕

아래 그림에서 굵게 써진 빨간 박스안에 메뉴를 나눔고딕으로 해보겠는데 설정은 굴림(gulim)됐는데 굴림으로 된 것을 지우면 나눔고딕이 됩니다.


Ctrl+F로 sidebar h3를 입력해서 찾은 후 font-family: gulim;을 지우면 아래 그림처럼 됩니다. 제가 일없이 코드를 지운 것이 아니라 CSS에서 font-family가 폰트설정인데 폰트설정을 지워버리면 되니 gulim(굴림)을 지운 것입니다.


이어서 사아드바에 날짜,시간,이름을 나눔고딕으로 하기 위해서 두칸을 아래로 이동해서 아래 그림처럼 하기 위해서 먼저 사이드바에 나타나는 이름,날짜,시간을 나눔고딕으로 하기 위해 아래처럼 합니다. 참고로 사이드바는 영어로 sidebar이므로 많은 사람이 이름으로 sidebar를 사용하므로 기억해 두시기 바랍니다.
  1. sidebar .cnt에서 Tahoma, Helvetica, Arial, Gulim, sans-serif 지웁니다.
  2. sidebar .date에서 Tahoma, Helvetica, Arial, Gulim, sans-serif 지웁니다.
  3. sidebar .name에서 Dotum, Arial, sans-serif 지우면 아래 그림처럼 됩니다.


4.댓글 입력창,검색창 나눔고딕

Ctrl+F로 input을 입력하고 찾습니다. 거기에서 dotum 대신 NanumGothic, 나눔고딕, "Malgun Gothic", "맑은 고딕", Gulim, 굴림으로 하면 아래 그림같이 됩니다.


Ctrl+F를 눌러 comment .date라는 것은 찾은 후 댓글의 이름(필명),날짜 등의 글꼴도 나눔고으로 하기 위해 아래 1,2 번처럼 합니다.
  • 댓글 날짜(.comment .date), 댓글 이름(.comment .name), 댓글 이름에 링크(.comment .name a)를 나눔고딕으로 하기 위해 font를 자우고 font-weight :bold를 지워시면 아래처럼 됩니다.


5. 카운터 등 글꼴은 나눔고딕으로

사이드바에 있는 카운터,RSS 등을 나눔고딕으로 변화시켜보겠는데 카운터의 경우는 counter에서 Verdana, Helvetica, Arial, Gulim, sans-serif을 지우면 아래와 같이 됩니다.


티스토리 가입하기라는 글을 나눔고딕을 바꾸기 위해 아래 그림의 dotum을 지우면 나눔고딕으로 됩니다.

모든 것을 나눔고딕으로 변경하기 위해서 css에서 글꼴 설정은 font나 font-family가 되므로 있는 그안에 있는 Verdana, Helvetica, Arial, Gulim, sans-serif,dotum 이런 것이 있으면 모두 지우면 나눔고딕으로 됩니다.

나눔고딕 지우기

나눔고딕을 여러분이 컴퓨터에서 지워 나눔고딕이 없으면 어떻게 나타나는지 보세요. 아래 그림은 설치된 프로그램 목록에 나눔글꼴이 나옵니다.  만약 윈도우 7이나 Vista라면 맑은 고딕으로 보일 것이고 XP에서 나눔고딕이나 맑은 고딕이 설치되지 않았다면 굴림으로 보일 것입니다. 참고로 아래 그림은 여러분이 컴퓨터에 설치된 나눔글꼴입니다. 윈도우 7에서는 나눔글꼴을 선택한 후 제거를 누르면 제거됩니다.


저의 설정

이 블로그 스킨에서 위와 같이 하지 않아도 나눔고딕으로 설정되어 있고 저는 맑은 고딕이 없으면 돋움이 아닌 굴림으로 나오도록 아래와 같이 했습니다.


블로그에서 글내용이 article이므로 article을 제 마음대로 제어하기 위해 아래 그림과 같이 했고 사이드바(sidebar)도 제어하기 위해 아래 그림의 긴 빨간형 사각형처럼 폰트 설정을 했습니다.


마치며

여러분이 아셔야 할 것은 여러분이 블로그를 볼 때 상대방이 컴퓨터에 나눔고딕이 설치된 경우를 봐야 합니다. 여러분이 컴퓨터에 나눔고딕이 설치됐다면 무조건 나눔고딕이 보이므로 나눔고딕을 제거하고 블로그를 보시기 바라고 나눔고딕이 없으면 시스템에 나눔고딕으로 안 보입니다. 단, 익스플로러를 사용하고 eot 웹폰트를 사용하는 경우는 여러분이 폰트를 제어할 수 있습니다. 그리고 ttf 글꼴을 블로그에 올려놓을 수도 있는데 ttf의 용량, 저작권때문에 ttf를 올려놓는 방법을 권하지도 않고 쓸 생각도 없습니다.

  • 티비님의 블로그는 나눔고딕이 아닌 맑은 고딕으로 한 블로그인데 http://nextgoal.tistory.com/601을 클릭하여 맑은 고딕도 보고 익스플로러에서만 적용되는 eot 웹폰트로 블로그를 하는 방법, 가독성을 높이는 글꼴 크기등을 배우시기 바랍니다. 
  • eot 웹폰트 다운로드와 적용은 http://dopus.tistory.com/113을 보시기 바랍니다. 웹폰트 적용과 다운로드는 거기에서 더보기를 클릭하시면 됩니다.
  • 나눔고딕이 아닌 맑은 고딕 웹폰트와 크기는 http://ccoma.tistory.com/918 를 보시면 됩니다.
  • http://min-blog.tistory.com/398 을 보시면 티스토리 블로그에 파일경로에 대해 나와 있습니다.
  • 제가 글에서 잘 못알고 있거나 잘 못 설명한 것이 있으면 댓글에 적어주시기 바랍니다. 
  • 저는 CSS를 대강 알아서 스킨을 수정할 수 있지 스킨을 만들지는 못하니 스킨 제작 등의 것은 전혀 모릅니다. 

CSS 설정등이 어렵다면 http://yourjune.tistory.com/738 에 모두 적용된 스킨을 배포하고 있으니 받아 적용하시면 되니 그 글을 참조하세요.


BY 엔팩스

'블로그' 관련된 글

  1. 이전 댓글 더보기
  2. BlogIcon 멋진성이 2011.01.17 11:38 신고  댓글주소  수정/삭제  댓글쓰기

    글꼴이 좀 중요한거 같아요~ 너무 잘보여요

  3. BlogIcon 나이스블루 2011.01.17 12:24 신고  댓글주소  수정/삭제  댓글쓰기

    글꼴 바꾸는 방법이 따로 있었군요.
    정말 좋은 포스팅 고맙습니다.

    행복한 한 주 되세요...^^

  4. BlogIcon 레종 Raison. 2011.01.17 13:03 신고  댓글주소  수정/삭제  댓글쓰기

    저도 완전 고생해서 예전에 맑은 고딕으로 바꿨는데...
    이글보니 나눔 고딕이 더 좋아보이네요...
    근데 저걸 다시 할려하니... 엄두가 안나네요... ㅡ,.ㅡ

  5. BlogIcon Mashable 2011.01.17 13:14 신고  댓글주소  수정/삭제  댓글쓰기

    우와 진짜 궁금했던 정보인데 감사해요~~ 만약 제컴에 적용된 특정 폰트를가지고 스킨에 적용하면 다른 사용자들이 그 폰트가 없어도 보이나요?

    • BlogIcon . 백전백승 2011.01.17 16:23 신고  댓글주소  수정/삭제

      사용자가 익스플로러 사용자라면 웹폰트를 적용하여 가능하고, ttf를 올려 사용해도 가능하다고 하는 것을 많이 보았는데 ttf는 저작권 등이 문제가 될 것 같아요.

      eot외의 웹폰트와 ttf폰트에 대해서는 http://einmong.egloos.com/5415221 글을 참고하세요. eot 웹폰트가 아니면 파폭이나 크롬에서 되겠네요. 찾아보면 웹폰트는 eot 형식의 웹폰트만 보이지만요.

  6. BlogIcon 샤프심 2011.01.17 13:18 신고  댓글주소  수정/삭제  댓글쓰기

    나눔고딕이 가독성은 좋은거 같은데,.
    접속자 컴 사양에 따라서 어떻게 보일지 확신이 없어서
    그냥 굴림사용하고 있어요.. 좋은정보 감사합니다~~

  7. BlogIcon misszorro 2011.01.17 13:45 신고  댓글주소  수정/삭제  댓글쓰기

    제가 사용하고 있는 나눔고딕이네요ㅎ
    개인적으로 요 글씨체 넘 깔끔하고 좋은것 같아요ㅎ
    포샵으로도 자주 애용하는 글씨체^^

  8. BlogIcon ageratum 2011.01.17 16:01 신고  댓글주소  수정/삭제  댓글쓰기

    많은 분들께 도움될 것 같네요..^^
    저도 한때는 나눔고딕 쓰다가..
    뭔가 이상하게 꼬여서 지금은 그냥 기본폰트로 쓰고 있어요..^^:

  9. BlogIcon 굴뚝 토끼 2011.01.17 16:54 신고  댓글주소  수정/삭제  댓글쓰기

    CSS와 관련한 웹폰트 설치는 스킨 설정에서 제일 까다로운 부분 같습니다.
    매번 바꾸기는 하지만 마음에 쏙 들지가 않네요..^^

    • BlogIcon . 백전백승 2011.01.17 22:07 신고  댓글주소  수정/삭제

      저는 매번 글쓸 때마다 설정하기 귀찮은 것 같고 나눔고딕을 싫어하는 사람이 많은 것 같아요. 말은 가독성이 좋다고 하나 어떤 사람은 눈이 피로하다고 하더라고요.

  10. BlogIcon 참좋다 2011.01.17 17:55  댓글주소  수정/삭제  댓글쓰기

    나눔고딕체 저도 정말 좋아해요. 좋은 글꼴이 정말 중요하긴 해요. 가독성때문에요...

  11. BlogIcon 날아라뽀 2011.01.17 18:41 신고  댓글주소  수정/삭제  댓글쓰기

    블로그를 시작하는 분들에게 유용한 정보라는 생각이 드네요.
    저는 매번 글을 쓸때마다 바꾸는데. 참고하겠습니다.^^

  12. BlogIcon 설보라 2011.01.17 20:00 신고  댓글주소  수정/삭제  댓글쓰기

    나눔고딕도 예쁘네요! 전 맑은고딕으로 사용하고 있는데
    댓글난은 아직 손을 못 댔는데, 저렇게 하면 되는군요!
    한번 시도를 해봐야겠어요~ 오늘 한참을 눈여겨 봤네요!
    아주 유용한 정보네요! 감사합니다!^^*

  13. BlogIcon 신기한별 2011.01.17 20:50 신고  댓글주소  수정/삭제  댓글쓰기

    나눔고딕이 제일 괜찮은 것 같아요..

  14. BlogIcon 심플게임 2011.01.17 20:53 신고  댓글주소  수정/삭제  댓글쓰기

    네이버 나눔글꼴 너무 맘에 들어서 다른 곳에서 쓸때는 이미지화를 시켜서라도 쓰는데 유용한 정보 감사합니다. ^^

  15. BlogIcon Kay~ 2011.01.17 21:43 신고  댓글주소  수정/삭제  댓글쓰기

    나눔고딕 정말 폰트가 예쁜것 같아요!
    다른 폰트가 눈에 안들어온다는.. ㅎㅎ

  16. BlogIcon 레이니아 2011.01.18 02:04 신고  댓글주소  수정/삭제  댓글쓰기

    저도 무척 고생했었는데... 아마 현재 반만 적용되는 것 같아요...(...)
    이참에 다시 배워서 새로 적용해야겠습니다ㅜ_ㅜ

  17. BlogIcon ㄲiㄲi 2011.01.18 19:30 신고  댓글주소  수정/삭제  댓글쓰기

    포스팅 잘 보고 갑니다 ^^ 보면서 제 블로그의 글꼴을 바꿔 보려고 하고 있지만.. 나눔 글꼴을 설치했으나 글목록에서 보이질 않아서요 ㅠㅠ

    코드 수정은 못할듯 해서 스킨 위자드로 하려고 하는데 글꼴 목록에 나오지 않거든요. 도움 부탁드려요 ㅠㅠ

    • BlogIcon . 백전백승 2011.01.18 21:38 신고  댓글주소  수정/삭제

      http://min-blog.tistory.com/401 에서 설명했지만 나눔고딕을 설치했다고 티스토리에는 나타나지 않고 단지 네이버 블로그에서만 나타나요. 그냥 기본값으로 하세요. 글꼴 목록에서 선택하면 그 글꼴이 적용돼요. 스킨 목록에 있는지 보고 제가 해 볼께요.

    • BlogIcon . 백전백승 2011.01.18 21:44 신고  댓글주소  수정/삭제

      제가 간단히 해 보았지만 font-family에 나눔고딕을 추가했습니다.

      * {
      margin:0;
      padding:0;
      border:0;
      line-height:1.5;
      font-family:나눔고딕,dotum, sans-serif;
      }

      하고 스킨위자드의 글꼴을 기본값으로 했습니다.
      ps.이것은 단지 글내용만 적용한 것입니다.

  18. BlogIcon 체리보이 2011.01.23 20:12 신고  댓글주소  수정/삭제  댓글쓰기

    블로그 이용에 도움이 많이 되는 정보네요 감사~

  19. BlogIcon 수수한걸 2011.03.23 10:31 신고  댓글주소  수정/삭제  댓글쓰기

    아직 무슨말들인지는 잘은 모르겠지만, 암튼 초보 블로거인 저에게 유익할듯하네요,크
    종종 들를께용, 좋은 정보 감사합니당!

  20. BlogIcon 밀리언시크릿 2011.11.30 15:27 신고  댓글주소  수정/삭제  댓글쓰기

    새로 블로그를 하나 개설하고, 스킨 정리하는데 제목 폰트종류가 바뀌지 않아서 영 맘에 안들어 검색하다가 여기에서 좋은 글 발견하고 바로 적용했어요~~~^ ^ 감사해용용~~
    여기 자주 와서...여러가지 배워서 더 예쁘게 꾸며야겠어요. 감사해요~!!

    • BlogIcon . 백전백승 2011.11.30 15:33 신고  댓글주소  수정/삭제

      스킨의 CSS를 수정할 필요없이 기본 폰트가 여기서 보는 나눔고딕인 스킨을 http://min-blog.tistory.com/477 에서 설명했으니 보기 바랍니다. 참고로 여기에서 사용하는 스킨에 대한 정보는 공지에 있습니다.

  21. BlogIcon 카이로그 2012.11.21 15:30 신고  댓글주소  수정/삭제  댓글쓰기

    백전백승님! 정말 두번 세번 감사드려요! 이제야 적용이 되네요! 더 자주 찾아뵐께요! 언제나 좋은정보 많이 얻어갑니다^^