본문 바로가기

웹노하우&다운로드

웹폰트 티스토리(tistory)에 적용하기, eot 적용


웹폰트 티스토리(tistory)에 적용하기

1. 무료웹폰트를 직접올리기를 해서 올립니다.

 2. 스킨 편집에 들어가셔서 위쪽창(skin.htm)있는곳에서 <head>와 </head>사이에 다음의 문장을 넣어줍니다.

<style type="text/css">
<!--
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
a:link {font-family: 폰트이름;font-size: 10pt;}
a:visited {font-family: 폰트이름;font-size: 10pt;}
a:hover {font-family: 폰트이름;font-size: 10pt;}
a:acvite {font-family: 폰트이름;font-size: 10pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 10pt;}
-->
</style>

  폰트이름은 원하시는 이름을 쓰시면 되겠고 폰트 사이즈는 선택한 웹폰트의 크기를 적어주시면 되겠습니다. 화이트데이체같은 경우에는 10pt이고 보통 9~12정도로 되어있습니다.
이부분 까지만 해도 적용되는 스킨도 있으니 이 부분만 하시고 제대로 나오면 아래는 안하셔도 됩니다.

3. skin.htm에서 ctrl+f키를 눌러서 검색창을 연후 article_rep_desc_##]이라고 검색한후 이 부분 앞에 보시면
<div class="article"> 이라고 되어있는 부분 뒤에  style="font:10pt/150% 폰트이름;"을 넣어줍니다. 넣어주고 나면

<div class="article" style="font:10pt/150% 폰트이름;">
이런 식으로 되어있겠죠?

그리고 난후 저장을 눌러주시면 웹폰트가 적용된 블로그를 보실수 있을겁니다.^^
 적용이 안되어 보이면 새로고침을 하시면 됩니다..^^

그외 기타 자잘한 수정이 안된부분은 직접 찾아서 수정해주시면 되요^^

*** 파이어폭스에서는 웹폰트 안보입니다. IE 기반에서만 제대로 보여요.
*** eot 파일이라도 원래 유료폰트면 사용하실 수 없습니다.


이글의 원문 -  http://watersky.tistory.com/37