Material T를 쓰시면서 글씨체(폰트)가 마음에 안드실 수 있습니다.


    사실 폰트를 바꾸는 방법이 쉽지만은 않습니다. 

    그래도 원하시는 분들을 위해 강좌를 준비해봤습니다.


    스킨에 폰트를 적용하는 방법은 다양하기 때문에 이 방법으로 다른스킨에 적용된다는 장담은 할 수 없습니다.



    먼저 Material T에 적용된 폰트 적용 방식입니다.


    CSS편집에서 다음 부분을 찾으면 됩니다.

    이 부분이 폰트를 로드하는 부분입니다. 잘 기억해두세요.

    @font-face {

      font-family: 'NanumBarunGothic';

      src: url("./images/NanumBarunGothic.eot");

      src: url("./images/NanumBarunGothic.eot?#iefix") format("embedded-opentype"), url("./images/NanumBarunGothic.woff") format("woff");

      font-weight: 400;

      font-style: normal;

      font-stretch: normal;

    }


    폰트수정 방법 1 - 구글 웹폰트 이용하기

    https://fonts.google.com/earlyaccess

    구글 웹폰트 얼리액세스에 접속한 후 Ctrl+F를 눌러 korean을 검색하면 한글을 지원하는 웹폰트를 찾을 수 있습니다.


    얼리액세스의 폰트들은 미리보기가 되지 않으므로 폰트이름으로 추정하는 수 밖에 없습니다.

    Namum pen script를 예시로 들어보겠습니다.


    Link부분의 @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);를 복사해서

    위의 폰트를 로드하는 부분을 지우고 붙여넣기 합니다.


    그리고 그 아래에 Example부분을 복사해서 폰트를 로드하는 부분 아래에 다음과 같이 붙여넣습니다.


    최종적으로 아래 예시와 같은 모양이 되면 됩니다.

    예시)

    @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

    body {

      font-family: 'Nanum Pen Script', cursive;

    }

    (materialT.min.css에 폰트적용부분이 있지만 style.css의 내용이 우선이므로 폰트가 Nanum Pen Script로 바뀌게 됩니다.)



    .

    폰트수정 방법 2 -폰트파일을 직접 업로드 하는 방법

    구글 웹폰트를 사용하는 방법이 훨씬 편하고 빠르지만, 원하는 폰트를 적용하지 못하는 단점이 있습니다.

    TTF파일로 폰트를 가지고 있고, 라이센스가 된다면 다소 어렵지만 이 방법을 사용해볼 수 있습니다.


    TTF파일을 바로 사용하기는 어렵고 eot파일과 woff파일로 변환해야합니다.


    변환하는 방법은 여러가지가 있으니 몇가지 편리한 사이트 소개하는걸로 갈음하겠습니다

    ttf를 eot로 변환해주는 사이트 https://www.kirsle.net/wizards/ttf2eot.cgi

    ttf를 woff로 변환해주는 사이트 https://andrewsun.com/tools/woffer-woff-font-converter/

    (사이트 연결이 안된다면 구글에 ttf to eot또는 ttf to woff로 검색해보면 여러 유사 사이트를 찾을 수 있습니다.)


    eot와 woff파일이 준비되었다면 적당한 이름으로 수정한 후 HTML/CSS편집의 파일업로드에 업로드합니다.


    예를들어 font1.eot, font1.woff로 업로드했다면 맨위에서 봤던 폰트를 로드하는 부분을 수정합니다.

    @font-face {

      font-family: 'font1';

      src: url("./images/font1.eot");

      src: url("./images/font1.eot?#iefix") format("embedded-opentype"), url("./images/font1.woff") format("woff");

      font-weight: 400;

      font-style: normal;

      font-stretch: normal;

    }

    body {

      font-family: 'font1';

    }

    빨간색 부분이 수정해야하는 부분입니다. 맨아래 body부터는 폰트를 적용하는 부분입니다.


    폰트를 직접 업로드하는경우 용량이 클 수 있기때문에 폰트가 로딩될 때 까지 블로그에 글씨가 보이지 않을 수 있습니다.

    또한 반드시 퍼블리싱 가능한 라이센스가 있는지 확인한 수 사용하시기바랍니다.



    본문이나 제목같은 특정부분에만 폰트를 적용하고 싶을 때

    서로 다른 폰트를 사용하려면 위의 폰트 로드 부분을 여러번 로드해야합니다.

    예시) 원래있던 '나눔바른고딕'과 구글웹폰트 '나눔펜스크립트'를 모두 쓰고싶을 때

    @font-face {

      font-family: 'NanumBarunGothic';

      src: url("./images/NanumBarunGothic.eot");

      src: url("./images/NanumBarunGothic.eot?#iefix") format("embedded-opentype"), url("./images/NanumBarunGothic.woff") format("woff");

      font-weight: 400;

      font-style: normal;

      font-stretch: normal;

    }
    /*기본 나눔바른고딕 폰트 로드*/

    @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

    /*나눔펜스크립트 폰트 로드*/


    위의 예시와 같이 적용했을 때 본문과 제목의 폰트를 다르게 설정하는 방법입니다.(materialT 전용)


    .titleWrap > h2 {

      font-family:  "NanumBarunGothic" ; /* 본문 제목에 적용할 폰트 */

    }

    .article {

      font-family: 'Nanum Pen Script', cursive; /*본문내용에 적용할 폰트*/

    }




    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 백수생활
      2016.09.22 07:55 신고

      사실 한달전 부터 바꾸려다 실패했었습니다. 묻고는 싶은데 커스텀 요청일까봐 못물어 봤었어요 ㅋㅋ. 감사합니다.

    • BlogIcon 백수생활
      2016.09.22 09:57 신고

      혹시 이전에 썼던글도 바꾸는 방법있나요? 아무래도 적용이 안되는 것 같습니다. 일일이 고딕으로 다시 발행해도 그대로인 것 같습니다. 반면에 새로쓰는 글들은 제대로 적용이 되는것 같고요. 뭐 안되면 별 수 없지만 ㅎㅎ

      • BlogIcon 뭐하라
        2016.09.22 10:03 신고

        글마다 html편집들어가서 폰트설정된걸 다 지우는수밖에없습니다

      • BlogIcon 백수생활
        2016.09.22 10:15 신고

        댓글 달아주셔서 감사합니다.

        티스토리 HTML/CSS 스킨편집에서 글로 들어가는 것 말씀하시는 건가요?

        전부다 제가 수정한 걸로 뜹니다.

        @font-face {
        font-family: 'KPDM';
        src: url("./images/KPDM.eot");
        src: url("./images/KPDM.eot?#iefix") format("embedded-opentype"), url("./images/KPDM.woff") format("woff");
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        }
        body {
        font-family: 'KPDM';
        }

        아니면 혹시 크롬에서 F12누르고 수정해야하나요?

      • BlogIcon 뭐하라
        2016.09.22 10:16 신고

        아니요 글마다 수정들어가서 html편집모드로 들어가시는겁니다~

      • BlogIcon 백수생활
        2016.09.22 10:44 신고

        스킨 포럼에

        [블로그 폰트 변경후 이전글 폰트 수정방법 문의] 라는 제목으로 스샷첨부해서 질문을 올렸습니다.

        http://www.tistory.com/community/forum/skin

        -------------------------------------------
        @font-face {
        font-family: 'KPDM';
        src: url("./images/KPDM.eot");
        src: url("./images/KPDM.eot?#iefix") format("embedded-opentype"), url("./images/KPDM.woff") format("woff");
        font-weight: 400;
        font-style: normal;
        font-stretch: normal;
        }
        body {
        font-family: 'KPDM';
        }
        ------------------------------------------

        저 부분을 계속 지운후 저장했는데. 이부분 말고 딴부분 말씀하신건가요?

      • BlogIcon 뭐하라
        2016.09.22 10:47 신고

        글 작성시 설정한 폰트는 스킨의 폰트와 관계가없습니다 이 글은 스킨에 포함된 기본폰트를 바꾸는방법이구요
        아쉽게도 티스토리 에디터는 폰트설정을 지우는 기능이 없습니다 글마다 일일히 html편집모드로 들어가서 폰트설정을지워주셔야 기본폰트로 표시가됩니다 skin으로 바꿀수는 없습니다

    • BlogIcon 전자사향
      2017.06.12 12:45 신고

      바디 폰트 글자크기 수정은 어떻게 하면 적용이 가능할까요? 지금 너무 작게보여용

      • BlogIcon 뭐하라
        2017.06.12 12:47 신고

        body안에 font-family아랫줄에 font-size:12pt; 이런식으로 조절해보세요
        지금기억이잘안나는데 text-size일수도있습니다..

      • BlogIcon 전자사향
        2017.06.12 12:55 신고

        해봤는데.. 메인화면 글자크기가 수정이 안되네요. CSS로는 달리 방법이 없는걸까요?

      • BlogIcon 전자사향
        2017.06.12 13:02 신고

        아. 티에디션에서 수정하면 되네요.
        ㅋㅋㅋㅋ 감사합니당

    • BlogIcon WriterK
      2019.02.24 11:17 신고

      article .titleWrap h2 {
      color:/*@post-title-color*/#000000/*@*/;
      font-family:/*@post-title-font-family*/"NanumBarunGothic"/*@*/;
      font-size:/*@post-title-font-size*/2em/*@*/;

    • BlogIcon WriterK
      2019.02.24 11:18 신고

      위 CSS 에서 뭘 고쳐야 블로그의 제목이 고딕처럼 단단한 글씨로 나오게 되나요?

      • BlogIcon 뭐하라
        2019.02.25 15:25 신고

        본문을 보시면 CSS는 그대로두고 폰트 파일을 바꿔서 업로드해주시면됩니다
        웹폰트를 사용하시려면 본문 마지막장처럼 하시면되는데
        font-family 가 있는 줄을
        font-family: '폰트이름';
        로 바꾸시면됩니다