Material T 글씨체 바꾸는 방법
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; /*본문내용에 적용할 폰트*/
}
2016.09.22 07:55 신고
사실 한달전 부터 바꾸려다 실패했었습니다. 묻고는 싶은데 커스텀 요청일까봐 못물어 봤었어요 ㅋㅋ. 감사합니다.
2016.09.22 09:57 신고
혹시 이전에 썼던글도 바꾸는 방법있나요? 아무래도 적용이 안되는 것 같습니다. 일일이 고딕으로 다시 발행해도 그대로인 것 같습니다. 반면에 새로쓰는 글들은 제대로 적용이 되는것 같고요. 뭐 안되면 별 수 없지만 ㅎㅎ
2016.09.22 10:03 신고
글마다 html편집들어가서 폰트설정된걸 다 지우는수밖에없습니다
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누르고 수정해야하나요?
2016.09.22 10:16 신고
아니요 글마다 수정들어가서 html편집모드로 들어가시는겁니다~
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';
}
------------------------------------------
저 부분을 계속 지운후 저장했는데. 이부분 말고 딴부분 말씀하신건가요?
2016.09.22 10:47 신고
글 작성시 설정한 폰트는 스킨의 폰트와 관계가없습니다 이 글은 스킨에 포함된 기본폰트를 바꾸는방법이구요
아쉽게도 티스토리 에디터는 폰트설정을 지우는 기능이 없습니다 글마다 일일히 html편집모드로 들어가서 폰트설정을지워주셔야 기본폰트로 표시가됩니다 skin으로 바꿀수는 없습니다
2017.06.12 12:45 신고
바디 폰트 글자크기 수정은 어떻게 하면 적용이 가능할까요? 지금 너무 작게보여용
2017.06.12 12:47 신고
body안에 font-family아랫줄에 font-size:12pt; 이런식으로 조절해보세요
지금기억이잘안나는데 text-size일수도있습니다..
2017.06.12 12:55 신고
해봤는데.. 메인화면 글자크기가 수정이 안되네요. CSS로는 달리 방법이 없는걸까요?
2017.06.12 13:02 신고
아. 티에디션에서 수정하면 되네요.
ㅋㅋㅋㅋ 감사합니당
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/*@*/;
2019.02.24 11:18 신고
위 CSS 에서 뭘 고쳐야 블로그의 제목이 고딕처럼 단단한 글씨로 나오게 되나요?
2019.02.25 15:25 신고
본문을 보시면 CSS는 그대로두고 폰트 파일을 바꿔서 업로드해주시면됩니다
웹폰트를 사용하시려면 본문 마지막장처럼 하시면되는데
font-family 가 있는 줄을
font-family: '폰트이름';
로 바꾸시면됩니다