본문 바로가기
쓸데없는 아이디어와 마케팅

티스토리 스킨 수정, 네이버 나눔폰트 적용하기와 폰트, 자간(글높이) 수정

by 서민당총재 2014. 2. 16.
반응형

티스토리 스킨 수정, 네이버 나눔폰트 적용하기와 폰트, 자간(글높이) 수정


서민당 블로그 스킨이 얼마 전 부터 교체되었습니다.
다양하게 적용되었던 기능들을 멀리하고, 단순하면서도 애드센스에 부합되어지는 스킨으로 거듭나고자 변경했습니다.

다양한 기능들이 없어진 만큼 깔끔함에 초점을 두었지만,
특이하게도 본문의 나눔 폰트가 크롬, 파이어폭스에서는 잘 나타나지만 익스플로러 에서는 적용되지 않아 주말을 틈타 급하게 수정을 했습니다.


▲찬조출연: OCer님(http://ocer.kr/)


#네이버 나눔고딕 적용하기
네이버에서 제공한 나눔고딕은 누구나 사용할 수 있는 폰트로 개인, 기업 모두 사용할 수 있는 아주 좋은 폰트이며, 그 퀄리티 또한 높아 티스토리 이용자들에게 아주 선호되고 있는 폰트입니다.


▲약간의 소스 추가로 깔끔한 나눔고딕 웹폰트 적용


폰트 적용은 그렇게 어렵지 않습니다. 모빌리스에서 제공하는 웹폰트를 빌려와 적용하는 방식이기에 티스토리 스킨 편집 페이지의 style.css에서 간단하게 수정을 해주기만 하면 됩니다.

티스토리는 스킨 특징상 모두 다른 형태로 제공될 수 있으니 직접 자신의 스킨에 맞는 부분을 찾아서 넣어야 합니다.


1. @charset "utf-8"; 의 하단에 아래의 소스를 붙여넣기 합니다.

@import url('http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb');


2. 나눔 고딕을 적용하고 싶은 부분에 font-family 소스 뒤에 붙여넣기 합니다.
혹시 모르니 전 다 넣었습니다. ^ ^

나눔고딕, "Nanum Gohtic", NanumGothic

#티스토리 본문 폰트 크기, 자간 수정하기


폰트수정 자간 수정도 그리 어렵지 않습니다.
이 역시 스킨에 따라서 다르겠지만 본문의 경우 대개 .article아니 body에 다 있습니다. 이 부분을 찾아서 font-size를 수정해주시면 됩니다.
자간의 경우에는 line-height:100% 등의 형태로 되어있으니 이를 검색해 조금씩 수정하시면 가장 무난한 가독성을 찾을 수 있습니다.


font-size: 폰트의 크기

line-height: 100%, 자간(글높이)의 수정


자신의 티스토리 블로그의 폰트의 크기, 높이를 변경하고 싶으시면 이렇게 손쉽게 변경할 수 있습니다. 요즘에는 다양한 웹폰트를 제공하고 있으니 자신의 기호에 맞는 폰트를 설치해 개성있는 블로그를 꾸며보시기 바랍니다.


추천 무료 모빌리스 웹폰트 바로가기



반응형

댓글