어제 갑자기 글씨가 잘 안보인다는 지적을 받고 나서 아침에 일어나 열심히 검색해서 폰트를 바꿨다.

    원래 이전부터 바꾸려고 하였으나.. 귀차니즘 + 무식 이 겹쳐 안하고 있다가

    비도오고? 해서 바꿔버렸다. 그래서 나같이 잘 모르는 분들을 위해 최대한 쉽게?

    티스토리 블로그에 폰트를 적용하는 방법을 소개하겠습니다^^

    바꾼 필체는 "나눔고딕" 좀더 자세한 정보를 알고 싶으시면


    로 들어가보자 ~!! (나눔고딕과 나눔명조체는 네이버에서 무료료 배포중인 글꼴이다!)

    일단 다운이 안되시거나 귀찮으신 분들을 위해


    위의 파일을 받으면 자신의 컴퓨터에 나눔고딕체가 깔리게 된다.(전문가용도 따로 있으니 위의 링크를 참조하세요^^)




    ↑↑↑↑↑↑↑↑↑↑↑ 인스톨 화면. 따로 설치를 원하시면 체크를 뺴주시면 됩니다^^

    일단 폰트를 자기 컴퓨터에 설치 했다면 반은 다 한거다. 다른 블로그나 사이트에도 자세하게 나와 있지만
     
    필자는 EOTFAST 라는 프로그램을 써서 폰트를 적용시키는법을 설명 하겠다. 물론 이외에도 다른 방법이 없는건 아니니
     
    좀더 자세하게 알고 싶으면 검색을 해보면 된다.





    조기 Free Download 를 클릭하면 무슨 설문조사 식으로 나오는데 해도 되고 귀찮으신 분은 밑으로 쭉 내려서

    Done 키를 누르시면 다운로드 창이 나오게 된다.

    이것도 귀찮으신 분들을 위해 ~ 따로 파일을 링크 해두겠습니다 ^^




    일단 받으셧다면 ~! 자신의 컴퓨터에 설치된 폰트를 웹에서도 사용할수 있게 웹 폰트로 적용시켜보자.

    일단 Eotfast 파일의 압출을 풀자.( 압축을 푸는것이 설치하는것. 따로 설치는 필요없다^^)





    정상적으로 설치가 끝났으면  자신의 컴퓨터의 윈도우즈폴더에 있는 폰트 폴더로 찾아간다.(C:\WIndows\Fonts)





    위의 화면은 필자의 Fonts 폴더이다. 저기 보면 나눔고딕체와 나눔명조체가 설치된것을 확인할수 있다.

    우선나눔고딕체로 하는 방법을 설명하겠다. 나눔고딕과 명조체는 총3가지의 폰트로 되어있다. (보통,굵게,아주굵게)

    일단 위의 3가지중에 나눔고딕 보통체를 웹 폰트로 적용시켜보자. 일단 나눔고딕 폰트파일을 복사한 후에

    Eotfast 를 설치한 폴더에 붙여넣기 한다.




    폰트를 복사 한 후에 아래의 작업을 해주면 자신의 블로그에 쓰일 웹폰트는 완성!!^^





    웹폰트 생성 방법은 매우 간단하다. 그냥 위의 사진에서도 보듯이 폰트 파일을 조기 치타 모양의 아이콘에

    클릭&드래그 해서 오려 놓기만 하면 Eot(웹폰트)파일이 생성된다.

    정말 귀찮으신 분들을 위해 변경된 웹폰트 파일을 첨부!!


    잘 모르겠거나 귀찮으신 분들은 위의 웹폰트.zip 파일을 받아서 압출을 풀면 변경된 폰트파일을 바로 쓸수 있다.

    자~~! 이제 변경된 폰트를 내 티스토리 블로그에 적용해 볼까요~~~~~~??

    일단 스킨->스킨선택->파일 업로드로 간다.



    위의 파일 업로드 버튼을 눌러서 이런식으로 업로드 한 후에

    다시 스킨->Html/CSS편집 부분으로 간다. 작업은 총 2번으로 이루어 진다.

    1. 블로그 전체의 글꼴 스타일 변경 ( Style.css )

    2. 블로그 본문내용의 글꼴을 변경 ( Skin.html )

    첫번쨰 방법을 우선 설명 하겠다. 블로그의 폰트 스타일을 바꾸는 것으로 Style.css 파일의 @charset "utf-8"; 위에

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

    이렇게 넣어주면된다.






    쓰기 불편하신 분들은 코드파일을 받아서 붙여넣기 하셔도 됩니다^^


    일단 블로그 폰트스타일 적용은 끝!! 이제 본문 포스트의 글꼴을 변경 해보자.

    Skin.html 에서 <div class="article">로 검색 해보면 본문의 내용을 편집하는 부분이 나온다.


    ※ 위의 그림과 코드가 약간 틀릴수도 있으니 반드시 onclick="[##_s_ad_d_onclick_##]" title="Delete">Delete</a>
     
    이런 문구가 위에 있는지 확인해본다.

    위의 <div class-"artcle" 뒤에 style="font:14px/100% NanumGothic;"> 이렇게 추가 해주면 본문포스트 글꼴도 수정끝!

    <div class="article" style="font:14px/100% NanumGothic;">

    이렇게 바꿔주면 된다.




    보고 쓰기 귀찮으신분들을 위한 코드 ^^;;

    여기서 font 14px는 글자크기 이고 뒤의 100%는 글간격을 설정한 것이다.
     
    본인의 취향에 따라 수정해주면 좀더 매끄러운 블로그를 볼수 있다. 주의할점은!!

    ※반드시 미리보기를 먼저 해보고 제대로 적용이 되었는지 확인한 후에 저장하기!! 블로그스킨을 변경하기 전에는

    백업을 생활화 하는게 미연의 사태에 대비 할수 있다.

    --------------------------------------------------------

    항상 느끼는거지만 .. 포스팅 한번 할때마다 이미지 자르고 붙이고 이러는게 너무 힘들다 ㅠㅠ

    이런걸 쉽게 떡떡 하시는분들 보면 내 입이 떡 ! 벌어진다ㅠㅠ 정말 대단하신듯!!

    많이 모자라지만 이해해 주시길 바랍니다^^;;

    --------------------------------------------------------

    필자는 아직 이런쪽으로 스킬이 좀 딸려서 ~ 다른분들의 포스팅과 비슷한 경향이 많을겁니다^^;;

    그래도 이쁘게 봐주시구요!! 도움이 되셧다면 밑에 손가락 한번 클릭해주세요!!!

    당신의 손가락클릭 한번이 저에겐 큰 보람이자 힘이 됩니다^^







    이 글을 공유&퍼가기

    네이버
    페이스북
    구글+
    밴드
    카스
    카카오톡
    Posted by 머루 별머루
    • Favicon of https://mi-hue.tistory.com BlogIcon 미휴
      2010.10.27 17:38 신고

      좋은 글 잘보고 갑니다... 감사해요
      다음뷰랑 믹스까지 추천했어요..^^

      • Favicon of https://qortn.tistory.com BlogIcon 머루 별머루
        2010.10.30 00:52 신고

        뭘요 ^^;; 아직 부족한게 많은데 좋은글로 봐주시니 감사할 따름이네요 !! 멋진 블로그 활동 하시길!!

    • Favicon of http://sesc09.tistory.com BlogIcon 멍든오리
      2010.11.03 16:35 신고

      와우~ 좋은 정보 감사합니다 ^^

    • Favicon of http://tockki.tistory.com BlogIcon 톡끼
      2011.01.09 12:42 신고

      감사합니다 덕분에 적용했습니다 ㅋㅋ

      • Favicon of https://qortn.tistory.com BlogIcon 머루 별머루
        2011.01.10 00:49 신고

        적용 하셧다니 축하드려요 ^^ 감사는 제가 하겠습니다. 이런 난해한 글을 이해하셧다니 @@

    • Favicon of http://youkgae.tistory.com BlogIcon 육개
      2011.09.22 17:24 신고

      설명감사드립니다^^
      나눔고딕은 되는데 다른 글꼴은 안되네요ㅠㅠ 혹시.. 한글제목의 폰트는 제목을 영어로바꿔줘야하나요?ㅠ

    • Favicon of https://nafuture.tistory.com BlogIcon 주대연
      2014.02.02 12:10 신고

      감사합니다 :) 잘 정리해주신 덕분에 제 블록가 이뻐졌네요!!