블로그, 폰트만 변경해도 가독성이 좋아진다.

블로그 폰트를 변경해봤습니다.
스킨을 만져본적이 아주 오래전인것 같습니다.
블로그를 처음 개설했을때는 스킨 변경한다고 참 많은 시간을 소비했었는데 이제는 귀차니즘과 함께 실력이 부족한 관계로 손대기를 포기하고 있다가 ....
스킨은 포기하더라도 "폰트라도 바꿔보자"라는 일념으로 폰트 변경을 시도했습니다.

변경할 폰트를 선택하는 것은 "나눔글꼴"과 "맑은 고딕"중에서 택일을 했는데 나눔글꼴도 깔끔하고 좋지만  윈도우 7 에서 디폴트로 잡혀 있는 "맑은 고딕" 폰트가 괜찮아서 보여서 맑은 고딕 폰트로 변경하기로 하고 변경을 시도하는데.. 그게 참 쉬울것 같으면서도 제대로 되지 않더군요!

올 3월쯤인가  Microsoft의 WEFT ver 3.2 (WEFTIII2b1.exe)를 이용하여 폰트 변경을 시도하였지만..
맑은 고딕 폰트는 깨져서 제대로 변환이 되지 않아서 폰트 변경을 시도하다가 포기를 했습니다...

하지만 폰트변경에 대한 마음은 머리속에서 사라지지 않고 블로그를 볼때마다 나를 재촉하곤 했지요!
그래서 최근에 다시 시도를 했습니다.
WEFT가 아닌 EOTFAST라는 프로그램을 이용하여 재시도한 끝에
아주 쉽게 폰트변경에 성공했습니다.
^^

폰트 적용하는데 2분도 안걸렸다면 믿으시겠어요? 

이렇게 쉬운것을 왜 몰랐을까 하는 허탈함과 함께 앓던 이가 쏙 빠지는 것 같은 시원함이 동시에 느껴집니다.
사실 무엇이든 모를때는 어렵지만 알면 쉬운것입니다. ^^

폰트만 변경했을 뿐인데 블로그 느낌이 다릅니다.

우선 폰트만 변경했는데도 느낌이 확 달라지네요!
밝은 컬러의 스킨까지 변경을 했다면 금상첨화겠지만..
능력밖이라 폰트변경으로만 만족하려고 합니다.

 

블로그 폰트를 변경하기 위해서는...

블로그 폰트를 변경하기 위해서는 eot 파일을 준비해야 한다.

TTF : 컴퓨터에서 사용하는 폰트
EOT : 웹페이지에 포함하여 TTF폰트가 PC에 설치되어 있지 않아도 볼 수 있는 폰트로 인터넷익스플로러에서만 사용이 가능함.

PC에서는 워드프로세서나 엑셀, 인터넷등 상관없이 폰트가 PC에 설치되어 있어야 화면에 해당 폰트가 표시된다. 기본적으로 window가 설치된 모든 PC에는 굴림체나 돋움체가 설치되어 있기때문에 블로그 스킨 역시 기본적으로 굴림체나 돋움체로 되어 있다. 하지만 기본폰트가 아닌 특정 폰트(예를 들어 네이버의 나눔글꼴이나 다음의 다음글꼴, 맑은고딕등)는 style.css에서 폰트를 아무리 변경해도 해당폰트가 PC에 설치되어 있지 않은 방문자에게는 변경한 폰트는 보이지 않는다. 그래서 폰트설치 유무와 관계없이 익스플로러 사용자라면 누구나 지정한 폰트로 볼 수 있도록 변형한 폰트가 EOT 폰트이다.

1. 원하는 ttf(True Type Font) 폰트를 eot(Embedded Open Type) 파일로 변환해야 한다.
2. eot 파일을 웹에 업로드한다. (티스토리의 경우 스킨자료실에 업로드)
3. style.css에서 폰트명과 경로를 정의해준다.
4. style.css에서 본문, 사이드에 해당하는 스타일별로 글꼴이름을 적어준다.

여기서 가장 중요한 것이 eot 파일을 준비하는 것입니다. eot파일로 변환해주는 대표적인 프로그램이 WEFT인데 제가 사용하려는 맑은글꼴이 제대로 변환이 되지 않더군요. 또한 다른글꼴도 제대로 변환이 안될뿐더러 사용법도 매우 복잡합니다. 또 변경을 해도 입력해준 사이트(블로그)에서만 사용할 수 있기 때문에 변환된 eot 파일을 공유할 수가 없습니다. 그런데 아주 간편한 프로그램을 하나 발견했습니다. 아니 우연히 관련 글을 보게 되어 아주 쉽게 변환 및 적용을 할 수가 있었습니다.

 

또 한가지 중요한 점은 위의 3번에 해당하는 style.css의 가장 상단에 아래와 같이 폰트를 정의해주는 부분입니다.

@font-face { font-family: "맑은 고딕"; src:url(images/malgun.eot); } 


방법은 폰트를 웹폰트로 변환하는 방법 - TTF를 EOT로 변환을 참조하세요!

 

블로그 폰트 변경전과 변경후

자 그럼 변환전하고 변환후를 비교해보도록 하겠습니다.
폰트만 바꾸었는데도 매우 깔끔해졌습니다. 비교해보시 평좀 해주세요! ^^

 

폰트 변경전

폰트 변경전 글씨체입니다.

폰트 변경전 글씨체

 

맑은 고딕으로 변경후 (12픽셀)

"맑은 고딕"으로 변경한 후의 글씨체 이며 현재의 글꼴입니다.
글자만 샘플로 캡춰 해놓으니 큰 차이가 없어보이지만 자세히 보면 가독성이 매우 좋아졌음을 알 수 있습니다.

폰트 변경후 글씨체(12픽셀)

 

13픽셀로 글꼴크기를 변경했을때

맑은고딕 글꼴이 조금 작아보여서 13픽셀로 했을때의 모습입니다.

13픽셀로 변경했을때의 폰트크기

여러분들의 의견을 듣고 싶습니다.
맑은글꼴이 더 보기 좋은지.. 아니면 이전 글꼴이 보기 좋은지..
맑은글꼴이 더 보기 좋다고 했을때 12픽셀이 가독성이 좋은지,
13픽셀이 가독성이 더 좋은지 생각을 달아주시면 글꼴크기에 참고하도록 하겠습니다.

제가 읽기 좋은것보다는 방문하시는 이웃님들이 읽기 좋게 설정을 하고 싶습니다.

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. 이전 댓글 더보기
  2. BlogIcon 드자이너김군 2010.06.22 23:56 신고  댓글주소  수정/삭제  댓글쓰기

    음.. 전 원래 12픽셀을 선호 하는지라.. ㅋ
    저도 한번 적용해 봐야 겠군요. 감솨 합니다~~

  3. BlogIcon 꽁보리밥 2010.06.23 09:56 신고  댓글주소  수정/삭제  댓글쓰기

    역시 컴에 전문적인 지식이 있는 분이 훨 도움되는 포스팅이
    되는군요. 모르면 요즘은 무조건 배워야된다니깐요.^^

  4. BlogIcon Sakai 2010.06.23 12:29 신고  댓글주소  수정/삭제  댓글쓰기

    아직은 저한테 글의 내용이 어렵기 느껴집니다.ㅠㅠ이번에 공부열씸히 해야겠습니다.저는 왠지13쪽이 정말 마음에드네요.

  5. BlogIcon 찌질철이 2010.06.23 12:57 신고  댓글주소  수정/삭제  댓글쓰기

    저도 맑은 고딕파~~~ 방가방가~
    전 글씨가 크고 줄간격도 넓은 걸 선호하고 있어요~ ㅎ
    11pt로 쓰는데 이게 13필셀보다 큰거죠?

  6. BlogIcon 해피dreamer 2010.06.23 15:49 신고  댓글주소  수정/삭제  댓글쓰기

    일단 추천부터 해드리구요~ 꽝!
    폰트 변경하는 거 생각보다 쉽네요ㅎㅎ
    저도 한달 전에는 스킨 수정을 자주했었는데,
    스킨을 완전 수정하고 나니 변화되는 부분들이 생겨서
    요즘은 아주 조심스럽게 건드리고 있답니다.
    유용한 정보 감사합니다^^

  7. BlogIcon Design_N 2010.06.23 17:21 신고  댓글주소  수정/삭제  댓글쓰기

    오우 더 깔끔해보여요!^^

  8. BlogIcon 비프리박 2010.06.23 21:03 신고  댓글주소  수정/삭제  댓글쓰기

    글쓴이에 대한 존경심 표현, 독자로서의 애정표현인
    오타 지적 교환만으로도 충분히 훈훈합니다. 고맙습니당. ^^
    그 오타 지적 교환을 기념하기 위해 트랙백 교환을 제안합니다.
    저 먼저, 트랙백 보내 봤습니다. ^^

  9. BlogIcon 민구사이륙 2010.06.24 08:19 신고  댓글주소  수정/삭제  댓글쓰기

    맑은고딕이 훨씬 나은듯!! 저도 나눔고딕으로 바꿧는데 되게 깔끔해 보이더라구요. 다음체, 맑은고딕체, 나눔고딕체 이 3개가 제일 나은듯 보이네요.

  10. BlogIcon 둥이 아빠 2010.06.24 14:18 신고  댓글주소  수정/삭제  댓글쓰기

    13이 확실히 읽기가 편하긴 한데요..

    저도 바꿔꾸어야 하는데 고민이 많아요

  11. BlogIcon 안드로이드팩토리 2010.06.25 16:19 신고  댓글주소  수정/삭제  댓글쓰기

    바꾸니까 읽기가 참 편하네요 ㅎㅎ
    자세히 방법 알려주셔서 감사드려요. 저는 스킨에 맑은고딕이 설정되있어서
    그냥 쓰고 있었는데 바꿀 때가 되면 한번 방법대로 따라해봐야겠어요.
    좋은 글 감사드려요!

  12. BlogIcon 어멍 2010.06.25 18:26 신고  댓글주소  수정/삭제  댓글쓰기

    맑은 고딕 13이 낫네요.

    한가지 궁금한 건 폰트를 변경하면 기존에 작성됐던 포스트까지 소급해서 변경되나요?
    (밀리고 엉키고 하지 않습니까?)
    아니면 새로 작성되는 포스트부터 적용되나요?

  13. BlogIcon 기브코리아 2010.06.26 16:33 신고  댓글주소  수정/삭제  댓글쓰기

    맑은 고딕 13픽셀이 좋은 것 같아요 ^^

  14. BlogIcon 세아향 2010.06.28 14:29 신고  댓글주소  수정/삭제  댓글쓰기

    맞아요~
    저도 요즘 이 생각하고 있었는데...
    도움 잘 받고 갑니당^^

  15. BlogIcon 마루. 2010.06.28 15:49 신고  댓글주소  수정/삭제  댓글쓰기

    게으름이 가장큰 적이네요...계획도 많고 할일도 많은데
    게으름이............

  16. BlogIcon 윤뽀 2010.07.01 16:38 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋㅋㅋㅋㅋ
    저 케이님 글 보고 글꼴 변경 했는데.
    본문 쓰면서 글꼴을 임의 변경했더니... 적용이 다 안되는 문제가 발생해버렸네요
    와우~

  17. BlogIcon 민구사이륙 2010.07.23 08:03 신고  댓글주소  수정/삭제  댓글쓰기

    저도 폰트 한번 바꿧을 뿐인데, 확 바꼇어요!!ㅋㅋ

  18. BlogIcon 백전백승 2010.08.19 10:41 신고  댓글주소  수정/삭제  댓글쓰기

    맑은 고딕이나 나눔고딕은 12px는 작다는 느낌이 들어 저도 13px로 사용하고 있는데 돋움이나 굴림등을 12px가 좋은 것 같아요.

  19. BlogIcon 싱커 2010.09.24 15:46 신고  댓글주소  수정/삭제  댓글쓰기

    전 왜 안돼죠 ? ㅜ,ㅜ

    • BlogIcon Kay~ 2010.09.27 00:18 신고  댓글주소  수정/삭제

      @font-face { font-family: "맑은 고딕"; src:url(images/malgun.eot); }
      위 부분에서 "맑은 고딕" 부분과 eot파일명 지정이 제일 중요합니다.
      그리고 style.css에서 폰트부분을 모두 "맑은 고딕"으로 변경 또는 추가를 해야 합니다.

  20. BlogIcon 텍사스양 2010.10.29 12:02 신고  댓글주소  수정/삭제  댓글쓰기

    오랜 숙원사업 해결 한 것 같습니다..

  21. BlogIcon 해적왕이꿈 2011.02.18 01:15 신고  댓글주소  수정/삭제  댓글쓰기

    13이 보기 좋아요~