반응형
앞선 포스트에서는 설치형 블로그 홈페이지에 나눔글꼴을 적용하기 위해 PC의 FONT폴더에 있는 TTF  트루타입의 글꼴을 EOT 웹 글꼴로 변환하는 과정을 설명했다. 웹글꼴을 나눔고딕, 맑은고딕으로 바꾸는 이유는 개인적은 취향도 있지만 남들이 보기 지루하지 않아 가독성을 높이는데 있다.

다음뷰에서 다른사람들의 블로그 글을 읽다보면, 스킨이 깔끔하고 글꼴이 시원한 블로그를 만나면 웬지 마음이 편안하고 글이 머리속에 쏙쏙들어가는 느낌을 받기도 한다. 욕심이 생겨서 내 블로그에 적용해 보려고 하면, 사실 초보자들에겐 복잡한 스킨의 HTML 소스의 구조에 자신을 잃기도한다.

글쓴이는 이런 글꼴을 적용해 보려고 사실 몇시간동안 정보를 수집하고 프로그램을 구동하는 과정에서 실패를 거듭하다가 성공했다. 여기에 설명한 과정은 초보자라도 좀더 쉽게 따라 할 수 있도록 복잡한 기술적인 설명보다는 결과를 위주로 간편하게 설명해 보았다.

지난 포스트에 설명한 글꼴변환 프로그램 EOTFAST 프로그램으로 TTF →EOT 나눔고딕 글꼴을 준비했으면 시작한다. 준비가 안되었으면  설치형 블로그 글꼴변환, EOT 파일 가장 쉽게 만드는법 여기서부터 구독후, 나눔고딕 EOT 파일을 준비후 시작하면된다.


첫번째: 티스토리 관리자 모드 → HTML/CSS편집으로 들어가서, 미리 준비한 nanum.eot 파일을 업로드해야한다. 혹시 파일변환을 제대로 못하는 사람은 아래 첨부파일을 pc에 저장후 업로드 하면된다.


두번째 : EOT변환 프로그램으로 변환시킨 나눔고딕 EOT파일은, 가능한 영문으로 이름바꾸기를 하는것이 좋을것 같다. 파일탐색기로 자신의 컴퓨터에서 만들어 놓은 nanum.eot 파일을 찾아서 열기를 한다. 


세번째 : 자신의 컴퓨터에 만들어 놓았던 nanum.eot 라는 파일이 제대로 업로드 되었는지 확인해본다. 그리고 업로드된 파일을 찾아보면 image/nanum.eot 라는 주소를 가지게 된다.


네번째 :
style.css 로 가서  charset "utf.8"; 소스가 있는 위에, 아래 첨부된 소스를 추가한다. 일일이 소스를 영문으로 넣기가 어려우면 첨부파일에서 복사후 그대로 붙여넣기를 하면된다. 여기서 빨간색 소스는 파일 업로드한 글꼴의 고유주소며, 파란색 소스에는 확장자명을 뺀 nanum 만 적어야한다. 

추가로 응용하자면, 만일 맑은고딕으로 바꾸고 싶어서, malgun.eot 라는 글꼴을 업로드 했다면, 빨간색글자를 malgun.eot 라고 바꾸고, 파란색 글자는 malgun 이라고 바꾸면 된다.

@font-face {font-family:nanum; src:url(images/Nanum.eot)};
body{font-family:nanum; font-size: 12px;}
div{font-family:nanum; font-size: 12px;}



이상과 같이 style.css 에 소스를 첨부하면 기본적으로 티스토리 스킨 기준으로 사이드바, 댓글창, 방명록등 대부분이 나눔글꼴로 바뀐다. 하지만 정작 본문 글꼴은 바뀌지 않기 때문에 다음과 같이 skin.html 에도 나눔고딕으로 설정하기 위해 약간의 소스를 첨가해야한다.

본문영역에 수정할 소스는 skin.html 의 div class="article" 라는 소스가 있다. 이소스는 구글광고를 달아본 블로거라면 익숙할것이다. 본문영역의 위쪽에 구글광고를 삽입하기위해 찾던 바로 그곳에 style="font:14px/150% nanum;"  이란 소스를 추가로 첨부한다. 혹시 업로드한 파일이 malgun 이라면 이곳역시   nanum → malgun 으로 수정해주면 된다.


여기서 font 14px는 일반적인 글자크기이며, 150%는 글간격을 설정한것으로 현재 본문영역과 비교해 보면서 취향대로 사이즈를 조정해도 된다. 이상 모든 과정을 다 진행후에는 제대로 글꼴이 적용되었는지 혹시 다른 문제는 없는지 반듯이 미리보기를 통해서 확인후 저장해야한다.

이상과같은 설정으로 티스토리 블로그에 나눔고딕 글꼴을 설정한것은 절대적인 방법은 아니며, 다른 경로로 적용하는 방법도 있겠지만, 글쓴이 위주의 설정방법이다. 여기서 적용한 방법은 골치아픈 html 소스의 복잡한 구조를 설명하기 보다는 결과를 기준으로 쉽게 설명하려 했으니 도움이 되길 바란다.

PS: 포스팅한 내용은 대한민국 사람 99%가 사용하는 인터넷익스플러 기준으로 작성되었으며, 소수의 파이어폭스, 사파리,크롬,오페라 사용자 까지는 만족하지 못합니다. 현재 글쓴이 블로그는 마이크로소프트사에서 제공하는 맑은고딕 글꼴에, 글자크기 14px, 글간격 150%로 최적화 되어 있습니다.

☞ 관련글 보기:  설치형 블로그 글꼴변환, EOT 파일 가장 쉽게 만드는법 



유익하게 보셨나요?^^ 손가락 모양을 클릭하면 추천됩니다.

반응형

Posted by 행복한 털보작가

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. Favicon of http://naeng-e.tistory.com BlogIcon 냉이' 2010.08.02 11:23 신고  댓글주소  수정/삭제  댓글쓰기

    아찌님 어려워요.@.@
    그래도 한번 해봐야겠어요~

  3. Favicon of https://raonyss.tistory.com BlogIcon 라오니스 2010.08.02 11:52 신고  댓글주소  수정/삭제  댓글쓰기

    좀 복잡해 보이긴 하지만.. 도전해 보고 싶군요... ㅎㅎ

  4. Favicon of https://slds2.tistory.com BlogIcon ★입질의 추억★ 2010.08.02 12:09 신고  댓글주소  수정/삭제  댓글쓰기

    전 한번 해봤어요~ 나눔글꼴 맘에 들더라구요.. 근데 제 스킨이 문제인지 아니면 그 동안 작성한 글 간격에 문제인지 뭔가 글 정렬이 이상해져서 다시 원상복귀.. 한번더 차근차근 도전해봐야겠습니다.
    행복한 8월 되시구요 ^^

  5. Favicon of http://leedam.tistory.com BlogIcon leedam 2010.08.02 12:31 신고  댓글주소  수정/삭제  댓글쓰기

    복잡해서 포기 했어요 ㅎㅎ

  6. Favicon of https://hls3790.tistory.com BlogIcon 옥이(김진옥) 2010.08.02 22:24 신고  댓글주소  수정/삭제  댓글쓰기

    항상 좋은팁 감사드립니다..
    저는 글꼴을 변경한적은 없지만 나중에 유용하겠습니다..
    즐거운 저녁 보내세요~~

  7. Favicon of http://borgus.tistory.com BlogIcon DDing 2010.08.03 07:22 신고  댓글주소  수정/삭제  댓글쓰기

    너무나 자세하게 설명해 주셔서 따라해 봤는데
    결과는... 실패네요. ㅎㅎ
    블로그 스킨이 이상한가봐요. 아니면 제가 실수를 했거나요.
    하여간 감사드리고 싶어서 댓글 남기고 갑니다. ^^

  8. Favicon of https://jongeun9210.tistory.com BlogIcon ㉿_맥스 2010.08.23 10:14 신고  댓글주소  수정/삭제  댓글쓰기

    스킨이 문제인지 포스트영역에만 적용이 안되네요ㅜㅜ

  9. Favicon of http://sensetory.tistory.com BlogIcon ▒Mya▒ 2010.09.07 13:47 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다!

  10. 2010.09.18 20:12  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  11. Favicon of https://jbtrend.tistory.com BlogIcon 조범 2010.09.21 02:48 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다. 덕분에 스킨은 성공했는데 중요한, 본문은 여전히 설정이 안되네요 ㅠㅠ

  12. Favicon of https://hinaon.tistory.com BlogIcon 나온, 2010.10.06 10:39 신고  댓글주소  수정/삭제  댓글쓰기

    감사해요^^ 처음 블로그 만들어서 어떻게 설정하는지 잘 몰랐는데 덕분에 글꼴 적용했어요.^^

  13. 2010.11.07 15:36  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  14. 2010.11.11 20:21  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  15. Favicon of https://rinnestory.tistory.com BlogIcon Rinne 2011.02.04 10:48 신고  댓글주소  수정/삭제  댓글쓰기

    좋은팁 감사합니다!!!
    덕분에 쉽게 적용했어요~!! ㅎㅎ

  16. Favicon of https://momalri.tistory.com BlogIcon 몸알리 2011.02.23 00:01 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리 어려워하면서도 이렇게 하나하나 배워가고 있습니다.
    털보아찌님 덕분에 겁먹지 않고 따라할 수 있었습니다.
    감사합니다.^^

  17. Favicon of https://rockwell.tistory.com BlogIcon jadede 2011.07.27 08:01 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다~^^

  18. Favicon of https://saeumbook.tistory.com BlogIcon 새움지기 2011.11.28 11:00 신고  댓글주소  수정/삭제  댓글쓰기

    되시는군요ㅠㅠ 왜 전 안되는건지. 다시 한번 해봐야 겠습니다. 글 올려주셔서 감사해요~

  19. Favicon of https://137azure.tistory.com BlogIcon 에져어스 2011.12.09 22:53 신고  댓글주소  수정/삭제  댓글쓰기

    티스토리 처음이라 많이 배워가네요~ 팁 감사합니다^^

  20. Favicon of https://blindpurple.tistory.com BlogIcon _amabilite 2013.02.02 04:07 신고  댓글주소  수정/삭제  댓글쓰기

    저도 한 번 도전해보려고 하는데 저는 지금 산돌 종이학으로 시도하고 있는데 잘 안되서 아쉽네요 힝 ㅠㅠ
    이런 자세한 설명에도 실패하다니... OTL

  21. Favicon of https://mention9.tistory.com BlogIcon proof9 2013.10.23 13:20 신고  댓글주소  수정/삭제  댓글쓰기

    좋은글 감사합니다.

    따라해보니 본문을 제외한 나머지는 적용 성공하였습니다.

    본문은 못 했지만,, 이정도도 만족합니다.

    타이핑 하지 않도록 txt 파일을 첨부해주셔서 편리하게 따라할수 있었습니다.

    좋은하루되세요.