티스토리에 웹폰트 적용하기 [초보자 가이드]

[ 티스토리 초보자 가이드]

 

제가 티스토리에서 블로그를 운영한지가 2년을 넘어 3년째 되어 가고 어느덧 다른 분들께 초대장을 

배포하는 입장이 되었습니다.

초대장을 받아서 스킨을 정하고 블로그를 개설해서 블로그를 꾸밀려는데 티스토리는 가입형 블로그와는 다른 점이 많아서 

초보 블로거 분들께서 어려움을 겪고 있을 것 같은데요.

블로그 꾸미기 팁으로 여러 블로그를 방문해서 고수 블로거분들이 포스팅해 논 자료를 참고로

차근 차근 배우신다면 티스토리 블로그 꾸미기의 색다른 매력을 느끼실 겁니다.

 

부제를 티스토리 초보자 가이드라고 붙였는데요.저 역시 블로그 꾸미기에는 아직 초보자임을 밝혀 둡니다.

 

블로그를 꾸밀때 중요한 것 중 하나가 폰트일 텐데요.티스토리 블로그에서 제공하는 한글 폰트는 보시는 바와 같이 

4가지 폰트 밖에 없습니다.

 

 

이 폰트 타입은 제어판 > 글꼴에 보시면 ttf (TrueType)이나 otf (OpenType)으로 되어 있는데요. 

티스토리 블로그를 돌아 다니다 보면많은 블로거들께서 소위 말하는 가독성있는 글꼴인 나눔 고딕이나 

맑은 고딕으로 적용해서 발행한 글들을 보셨을 겁니다.

이 블로거분들이 사용하는 나눔 고딕이나 맑은 고딕, (이하 다른 폰트)가 바로 웹폰트인데요.

웹폰트란?

본인이 적용한 폰트로 블로그 방문자의 pc 글꼴에 해당 폰트가 설치되지 않았더라도 방문자의 눈에 적용된 폰트로 보여짐을 말합니다.

예를 들어 폰트 태그 소스를 사용해서 글을 발행했는데 방문자 pc에 해당 폰트가 설치되지 않았다면 방문자의 눈에는 

웹브라우저의 기본 폰트로 보여지게 됩니다.

 

그동안 제블로그에 적용한 웹폰트는 트루타입이나 오픈타입의 폰트를  eot(Embedded Opentype)으로 변환해서 

적용을 했었는데요.

이 방법은 IE 8 이하에서는 문제가 없지만 IE 9 에서는 웹폰트로 적용이 되지 않는 문제가 있었습니다.

윈도우7에서는 기본으로 IE 9가 탑재되어 있는데요.

IE 9에서는 woff (Web Open Font Format) 타입으로 변환을 해서 적용해야 되더군요.

그런데 초보자가 이런 과정을 적용할려면 쉬운 일이 아닐 겁니다.

그러면 좀 더 쉬운 방법으로 웹폰트를 적용하는 방법은 없는 걸까요?

답은 : 있습니다. 개인이나 비영리 단체에 한해서 무료로 웹폰트를 사용하도록 서비스를 해주는 사이트를 이용하는 겁니다.

모빌리스 웹폰트 서비스 사이트인데요.대부분의 웹브라우저를 지원한다고 나와 있네요.

 

 

모빌리스 웹폰트 서비스 http://api.mobilis.co.kr/webfonts/

 

 

 

 

적용할 웹폰트를 클릭하면 하단 쯤에 사용방법이 자세하게 설명되어 있는데요. 

 

제 블로그에는 나눔고딕웹 폰트가 적용되어 있는데요.

티스토리에 적용 방법은 관리자 모드로 들어가서 HTML/CSS 클릭, style.css에서 맨 위에 소스 코드

@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb); 넣어 주시고,

찾기 기능 (Ctrl+F)으로 'dotum'이라고 지정되어 있는 font 부분 전부를 원하시는 웹폰트로 바꿔 주시면 됩니다.   

제 블로그는 나눔고딕웹 폰트를 적용하기 위해 'NanumGothicWeb'으로 바꿔 줬습니다.

 

전부 수정을 하셨다면 미리보기로 잘 적용이 되었나 확인하시고 적용이 되었다면 저장 누르면 끝입니다.