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; /*본문내용에 적용할 폰트*/
}
