블로그에 웹폰트 적용하는 방법 , 텍스트큐브 웹폰트 적용법

블로그에 웹폰트를 적용하기 위해서 이것 저것 알아보다가... 

이분의 글(http://appleflavor.tistory.com/52)을 보고 많은 참고를 하였습니다.

링크 한 분이 참기신 것은 티스토리에 적용하는 방법입니다.

그런데..  사과맛 푸딩님이 남기신 글대로 하니...  본문을 포함한 전체적인 모든 부분들이 하나의 폰트로 일괄적용되어서,.  본문, 본문의 제목, 카테고리 등등의 폰트 사이즈가 전부 다르기 때문에 폰트가 이쁘지 않다는 것을 알았습니다.

그래서  저는...

카테고리
본문
본문제목

이렇게 3가지를 각각 다른 웹폰트로 적용해보기로 했습니다.

물론 이렇게 한 사이트에서 3개의 각 각 다른 웹폰트를 사용하시는 분들은 그리 많지 않으실 것입니다.

카테고리와 본문제목은 스킨마다 style.css 가 다르기 때문에..  여기서는 설명을 안하겠습니다.
본문만 적용하실려면..

skin.html 에서

</div><!-- /titleWrap -->
<div class="article">

</div>


수정 전

</div><!-- /titleWrap -->
   
     <div class="article" style="font:10pt/150% 모리스10;">
     

블로그에 웹폰트를 적용하기 위해서 이것 저것 알아보다가... 

이분의 글(http://appleflavor.tistory.com/52)을 보고 많은 참고를 하였습니다.

링크 한 분이 참기신 것은 티스토리에 적용하는 방법입니다.

그런데..  사과맛 푸딩님이 남기신 글대로 하니...  본문을 포함한 전체적인 모든 부분들이 하나의 폰트로 일괄적용되어서,.  본문, 본문의 제목, 카테고리 등등의 폰트 사이즈가 전부 다르기 때문에 폰트가 이쁘지 않다는 것을 알았습니다.

그래서  저는...

카테고리
본문
본문제목

이렇게 3가지를 각각 다른 웹폰트로 적용해보기로 했습니다.

물론 이렇게 한 사이트에서 3개의 각 각 다른 웹폰트를 사용하시는 분들은 그리 많지 않으실 것입니다.

카테고리와 본문제목은 스킨마다 style.css 가 다르기 때문에..  여기서는 설명을 안하겠습니다.
본문만 적용하실려면..

skin.html 에서

</div><!-- /titleWrap -->
<div class="article">

</div>


수정 전

</div><!-- /titleWrap -->
   
     <div class="article" style="font:10pt/150% 모리스10;">
     
     </div>

수정 후

물론  style="font:10pt/150% 모리스10;">   이 부분은 자신에게 맞게 수정하셔야겠지요.

여기서는 웹폰트가 있다는 가정하에 설명을 드리는 것입니다.

그런 후..
style.css 도 수정하셔야합니다.

@font-face{font-family:모리스10; src:url(http://폰트주소/morris2_10.mwf)}
@charset "utf-8";

style.css 제일 상단에..  즉,  @charset "utf-8"; 바로 위에..
@font-face{font-family:모리스10; src:url(http://폰트주소/morris2_10.mwf)}
이것을 삽입하시고 저장 후..  블로그로 이동하셔서

F5 로 새로고침 후 보시면 폰트가 잘 적용되었는지 확인이 가능합니다.



웹폰트는 무료로 주는 곳도 있고 유료 구입이 가능한 곳도 있습니다.

저 같은 경우는 모리스디자인에서 폰트를 구입했습니다.





텍스트큐브에서 글 제목의 폰트 및 글자 색상 변경방법

http://chobo1.tistory.com/35  이 글을 참고하시면 됩니다.


블로그 skin.html 에서.

  <h2><a href=""></a></h2>

이 부분을 수정하라고 하는데.. 저는 잘 안되에서..

style.css에서.

#content .entry .titleWrap     { color:#ccc; margin-bottom:10px;}
#content .entry .titleWrap h2    { letter-spacing:-0.1em;}
#content .entry .titleWrap h2 a   { color:#000;}

이 부분을 수정했습니다.

#content .entry .titleWrap     { color:#ccc; margin-bottom:10px;}
#content .entry .titleWrap h2    { letter-spacing:-0.1em;}
#content .entry .titleWrap h2 a   { font-family:체리12; color:#000;}

이렇게 하니 잘 적용이 되더라구요..
물론 style.css 제일 상단에 체리12라는 폰트는 이미 적용을 한 상태죠...
스킨 마다 style.css 가 다르니.. 참고하세요.

     </div>

수정 후

물론  style="font:10pt/150% 모리스10;">   이 부분은 자신에게 맞게 수정하셔야겠지요.

여기서는 웹폰트가 있다는 가정하에 설명을 드리는 것입니다.

그런 후..
style.css 도 수정하셔야합니다.

@font-face{font-family:모리스10; src:url(http://폰트주소/morris2_10.mwf)}
@charset "utf-8";

style.css 제일 상단에..  즉,  @charset "utf-8"; 바로 위에..
@font-face{font-family:모리스10; src:url(http://폰트주소/morris2_10.mwf)}
이것을 삽입하시고 저장 후..  블로그로 이동하셔서

F5 로 새로고침 후 보시면 폰트가 잘 적용되었는지 확인이 가능합니다.



웹폰트는 무료로 주는 곳도 있고 유료 구입이 가능한 곳도 있습니다.

저 같은 경우는 모리스디자인에서 폰트를 구입했습니다.





텍스트큐브에서 글 제목의 폰트 및 글자 색상 변경방법

http://chobo1.tistory.com/35  이 글을 참고하시면 됩니다.


블로그 skin.html 에서.

  <h2><a href="/638">블로그에 웹폰트 적용하는 방법 , 텍스트큐브 웹폰트 적용법</a></h2>

이 부분을 수정하라고 하는데.. 저는 잘 안되에서..

style.css에서.

#content .entry .titleWrap     { color:#ccc; margin-bottom:10px;}
#content .entry .titleWrap h2    { letter-spacing:-0.1em;}
#content .entry .titleWrap h2 a   { color:#000;}

이 부분을 수정했습니다.

#content .entry .titleWrap     { color:#ccc; margin-bottom:10px;}
#content .entry .titleWrap h2    { letter-spacing:-0.1em;}
#content .entry .titleWrap h2 a   { font-family:체리12; color:#000;}

이렇게 하니 잘 적용이 되더라구요..
물론 style.css 제일 상단에 체리12라는 폰트는 이미 적용을 한 상태죠...
스킨 마다 style.css 가 다르니.. 참고하세요.