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

}

반응형

저작자표시비영리동일조건