우토로 마을을 살리자

티스토리(태터툴즈) 블로그에 웹폰트 적용하기

Step 1. 무작정 따라하기

1. 웹폰트 다운로드 후, '스킨-스킨편집-직접올리기' 모드에서 업로드.

 2. 스킨 편집을 누르고, 위아래로 나뉜 두가지 창 중에서 위쪽 창의 소스 가운데 <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>

폰트 이름은 자유로이 입력해도 Ok.

(하지만, 기본 폰트의 이름을 넣는 것이 좋겠죠. ex) 산책10)

'폰트파일명.확장자' 이 부분의 ~./images/... 부터가 경로인데 여기서는 티스토리에 맞춰서 설명하고 있으므로... 파란 부분에만 알아서 넣어주면 되겠다. 10pt 는 폰트사이즈인데, 이 사이즈의 경우 특정한 사이즈에서만 제대로 출력이 되는 폰트가 많으므로 반드시 다운받은 곳에서 적절 사이즈를 확인해서 집어넣어주자.

3. 다시, 위쪽 창 skin.htm 탭에서 article_rep_desc_## 을 검색하여 찾는다. (저 부분이 전체 중 하나 뿐이므로 찾기 쉽다.) 그리고 찾은 부분의 바로 윗 줄을 보면 <div class="article"> 이라는 구문이 있다. 그 구문 옵션에다가 style="font:10pt/150% 폰트이름;" 이와같이 넣어준다.

여기서 10pt 는 역시 폰트별로 적절한 사이즈를 넣어야하고, 150% 는 줄간격이므로 적당한 줄간격을 찾아서 넣어주자. 기본은 당연 100%. (웹폰트는 작고 아기자기한 글씨체가 많기 때문에 150% 정도로 벌려주는 것이 보통 예쁘게 보입니다.)

<div class="article" style="font:10pt/150% 폰트이름;">
이렇게 되면 Ok.

2번의 과정은 웹폰트를 블로그 스킨과 외부에 적용하는 것이고 3번의 과정이 블로그의 포스트와 내용물에 폰트를 적용하는 과정이다. 원하는 부분에만 적절히 적용해 주시길.

덧: 파이어폭스에서는 웹폰트 적용 불가.

(이해하고 따라가는 Step 2 를 보실분은 조금더 펼쳐보세요.)

more..

이올린에 북마크하기(0) 이올린에 추천하기(0)

제 글은 제 블로그 내부에서만 사용하실 수 있습니다.
본문 전체를 외부에서 사용하시려면 링크를 이용해주세요.
펌글은 재차 발행하지 않음을 원칙으로 하고 있습니다.


Tag : ,

22 Comments   1 Trackback


Trackback URL : http://si-hon.net/trackback/2

  1. 웹폰트 완전정복!

    Tracked from iBlog 2008/03/03 21:43 Delete

    저는 글자체를 좋아합니다. 타이포그래픽에도 관심이 있고, 글자의 다양성, 표현성을 보면 빠져들 수 밖에 없습니다. 그래서 블로그에도 글자체를 적용하고 싶은데, 티스토리에서는 폰트를 다양하게 지원하지 않는군요ㅜ 그래서 검색해봤습니다. "웹폰트" 라고 검색어를 입력하고 엔터를 치니 많은 사이트들이 나왔습니다. 저는 그중에서 시혼님의 티스토리(태터툴즈) 블로그에 웹폰트 적용하기 글에서 많은 정보를 얻었습니다. 저는 시혼님의 글만 보고 웹폰트 파일이 우연히..

  1. BlogIcon 나무같이 2007/04/21 00:00 # Delete Reply

    웹폰트가 궁금해서 찾아왔다가 잘 알았습니다~
    유용한 정보 감사합니다. ^^

  2. BlogIcon 시혼 2007/04/21 00:34 # Delete

    앗, 도움이 되셨다니 기뻐요~ 좋은하루 되세요.^^

  3. BlogIcon 밤하늘 2007/04/21 00:42 # Delete Reply

    위와 같이 하면 편하긴 하지만...전체적으로 동일한 폰트가 적용된다는 단점이 있어서...
    전 개별적으로 적용 했습니다. 방법은 제 블로그에 올려뒀습니다.

  4. BlogIcon 시혼 2007/04/21 19:13 # Delete

    개별적용하신 포스트, 못 찾겠어요^^;
    방문 감사해요.^^ 좋은하루 되세요~

  5. BlogIcon 김햇님 2007/04/27 02:12 # Delete Reply

    웹폰트를 바꿀려고 검색중인데 ㅠㅠ 첫번째 쉬운 방법으로 해도 안바뀌네요 ㅠㅠ 왜 이럴까;;; ㅠㅠ

  6. BlogIcon 시혼 2007/04/27 11:04 # Delete

    안녕하세요.^^
    에궁.. 과정을 알면 어디에서 어떻게 하시면 된다고
    수정해 드릴 수 있을텐데. ㅡㅜ 기본적인걸 알려드리고나면
    각자 블로그에 적용하시는 부분을 봐 드릴때가 제일 답답해요 ㅡㅜ

  7. 2007/04/29 12:49 # Delete Reply

    비밀댓글 입니다

  8. BlogIcon 시혼 2007/04/29 15:03 # Delete

    방명록에 글 남겼어요^^

  9. BlogIcon ,사진 2007/04/30 19:28 # Delete Reply

    좋은정보 감사합니다. 저도 활용해 봐야겠네요.

  10. BlogIcon 시혼 2007/04/30 22:45 # Delete

    도움이 되었다니 기쁘네요ㅡ. 방문해 주셔서 감사합니다.^^

  11. BlogIcon 그리볕 2007/08/30 00:41 # Delete Reply

    웹폰트때문에 찾아왔어요. 유익한 정보 감사합니다. 덕분에 잘 적용했어요~div체제는 하나도 몰랐었는데 따라하니까 되네요. (노가다;;) 감사합니다.

  12. BlogIcon 시혼 2007/08/30 10:59 # Delete

    예쁘게 바꿔주려면 노가다가 좀 심하긴해요^^;;
    그래도 스킨 자주 바꾸면서 익숙해지면 그것도 복사 신공으로 노가다가 노가다가 아니게 된답니다. ㅎㅎ;; 도움이 되었다니 기쁩니다~.

  13. BlogIcon Bold 2008/02/26 16:05 # Delete Reply

    부분적으로 적용하는 방법은 없나요?

  14. BlogIcon 시혼 2008/02/28 11:20 # Delete

    step2 에서 빨간색 글씨로 된 부분을 보시면요,
    가령 예를 들어 두번째 줄에 a:link 다음에 있는
    빨간색 부분의 경우에는 '링크'글씨의 폰트를 바꾼다는 속성입니다.

    step2에서처럼 스타일 시트를 수정하는 경우
    보통 폰트 속성이 저렇게 줄 별로 지정되어 있구요
    각 줄의 맨 앞에는 그것이 본문인지, 카테고리인지, 또는 제목 글씨인지 등등...
    그 폰트 속성이 적용될 부분이 표시되어 있습니다.

    전체적으로 예쁘게 적용하시는 것과 마찬가지로
    부분적용 역시 스타일 시트를 곰곰이 살펴보시고 고치셔야 해요.

  15. BlogIcon Bold 2008/02/28 13:55 # Delete Reply

    제가 질문을 잘 못 했네요;
    본문 내용에서 부분적으로 바꿀 수 있는 방법은 없나요?
    예를 들면 윗 줄의 문장에서 "부분적"이라는 단어만 웹 폰트를 적용하는 방법이요.

  16. BlogIcon 시혼 2008/02/28 19:21 # Delete

    그건 스킨 단계에서 처리할 부분이 아니고요...
    글을 쓰실 때 위지윅에서 Html 코드를 수정할 수가 있을겁니다.

    스킨에서 본문 전체에 폰트를 적용하게끔 해 두셨다면,
    글을 쓰실때(가령 티스토리라면 글쓰기 박스 우측위에 EDIT 버튼이 있습니다.)
    Html 코드 수정을 누르셔서 <font> 태그를 사용해서
    직접 다른 폰트를 불러오도록 작성해 주셔야겠지요.

    웹폰트를 특정한 문구가 나올때만 사용하시려면
    일단 폰트 자체는 올려두시고요, 위에 Step2에 있는
    <head> 에서 웹폰트를 읽어오는 기본 구문은 적어주신 다음..
    글을 쓰실때마다 해당 글의 html 코드를 수정하는
    방식으로 사용하실 수 있습니다.

  17. BlogIcon Bold 2008/03/02 23:33 # Delete Reply

    답변 감사합니다^^
    관련 글을 곧 포스팅할 예정입니다. 글이 완성되면 트랙백을 보낼께요.
    근데 아쉽게도 부분 적용은 안 되네요. 스타일 태그를 본문에 쓰면 내용과 함께 사라져버립니다ㅠㅠ

  18. BlogIcon 시혼 2008/03/03 12:19 # Delete

    도움이 되셨다니 다행입니다..^^
    부분 적용에 대해서도 시원하게 해결이 되셨다면 좋았을 것을. ㅡㅜ
    트랙백 기다리고 있겠습니다.~

  19. BlogIcon 복꼬 2008/05/27 17:47 # Delete Reply

    step1, 2 둘다 해봤는데 적용이 안되요ㅠㅠ
    도와주세요!!!!!!!!!!!!!ㅠㅠ

  20. BlogIcon 시혼 2008/08/20 14:19 # Delete

    헉.. ㅡㅜ 넘 간만에 댓글을; 죄송해요..
    지금쯤 해결 하셨으려나..

  21. BlogIcon 나르샤 2008/08/19 10:08 # Delete Reply

    좋은 정보 감사합니다..
    많은 도움이 됐어요..즐거운 하루 되세요..^^

  22. BlogIcon 시혼 2008/08/20 14:19 # Delete

    좋은 하루 되세요.^^

Leave a comment

« PREV : 1 : ... 136 : 137 : 138 : 139 : 140 : 141 : 142 : 143 : 144 : ... 174 : NEXT »


Site Stats

Entries

  1. : Wanna Be.. - 거미
  2. : 잠은 또 왜 잘못자가지고..;;
  3. : 보고싶다 - 김범수
  4. : 주정뱅이 크리.
  5. : 7월 17일.... 어?!
  6. : Migrate (Feat. T-Pain) -..
  7. : G+Ral
  8. : 으으...
  9. : Happy
  10. : 오늘

Comments

  1. 14:19 시혼: 좋은 하루 되세요.^^
  2. 14:19 시혼: 헉.. ㅡㅜ 넘 간만에..
  3. 08/19 나르샤: 좋은 정보 감사합니..
  4. 08/16 시혼: ㅋㅋ 유난히 '더워'..
  5. 08/15 몽상: 응허...메렁...더위..
  6. 08/14 시혼: 어흑 맛난거!
  7. 08/09 록상: 흑흑.. 주말에 일할..
  8. 08/07 시혼: 우왕국 ㅡㅜ 맹희씨...
  9. 08/06 록상: 허극.. 선화씨잉..ㅠ..
  10. 08/04 시혼: 으헝.. 피곤해 ㅡㅜ..

Trackback

  1. 03/03 iBlog: 웹폰트 완전정..
  2. 2007 obbaya.com: 유명 도메인등..
  3. 2007 Always Renewal: 웹폰트.. 우리..
  4. 2007 디자인로그[DE..: 우리글닷컴, '..
  5. 2007 TechCabin: 처음부터 Open..
  6. 2007 FLARE LOG: 아프간 인질..
  7. 2007 티에프, 잡학..: 순수한 봉사라..
  8. 2007 산소마스크: 피랍인들...소..
  9. 2007 까칠맨의 버럭..: 21명..결국 불..
  10. 2007 deutsch`s Web..: ■ 아프가니스탄

Link

  1. Cool Spooky
  2. Mochaosu-story
  3. ▒ 세이의 '사바스 카페' + Sabbath_Caf..
  4. 순철그리기는 조각배

RSS Feed
Subscribe to RSS articles