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

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..

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


Tag : , , ,

107 Comments   2 Trackbacks


Trackback URL : http://si-hon.net/trackback/2 관련글 쓰기

  1. 웹폰트 완전정복!

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

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

  2. 네이버 나눔 글꼴 &amp; 웹폰트 설치

    Tracked from Comgoon's House 2008/10/29 03:36 Delete

    좀 늦은 감이 있지만~ 네이버에서 한글날 캠페인으로 나눔글꼴 2종류를 무료로 공개했다. 관련 링크를 통해 다운을 받을 수 있으며 윈도우 버전과 맥OS버전 두 종류를 제공한다. 두 종류의 글꼴은 위에 이미지 처럼 나눔고딕과 나눔명조체! 사실 나는 가장 일반적으로 많이 사용되는 굴림체를 좋아한다~ 고딕체는 그다지 즐겨 쓰던 글꼴이 아닌데 윈도우 비스타의 기본 글꼴인 맑은고딕체를 보곤 좋아졌다. 근데 이 나눔고딕체는 내가 좋아하던 굴림체와 고딕체의 중간정..

« PREV : 1 : ... 265 : 266 : 267 : 268 : 269 : 270 : 271 : 272 : 273 : ... 302 : NEXT »


Site Stats


블로그 글을 검색해보세요

Entries

  1. : 시혼의 미투데이 - 2010년 7월 26일
  2. : 고마워요 ㅠㅠ
  3. : 오랜만에 포스트, 몬헌... G키린 태도 엎..
  4. : 하아...
  5. : Happy BirthDay to OSU
  6. : 옷을 샀다.
  7. : [Flash] 바이러스로 인류를 말살, 'Pande..
  8. : Jump, 높이 올라.
  9. : 쬐끔.
  10. : 요즘엔

Comments

  1. 07/21 흙인형: 공략 덕분에 즐겁게 했습니다. 제 블로..
  2. 07/12 쥬똄: 음 그렇군요. 언젠가 한번 깊이 공부하..
  3. 07/11 시혼: 네, 그게 위에 첫번째 step.1 의 방법으..
  4. 07/11 Je T'Aime: 시혼님 ㅠㅠㅠ 위에 덧글 달았던 쥬뗌므..
  5. 07/07 감사합니다: 감사합니다. 그런데 이 펌웨어 업그레이..
  6. 07/06 시혼: 네에. 링크로 첨부하시는 건 언제든 환영..
  7. 07/06 시혼: 헉..! 자네눈! 그나저나 한국에 오긴 한..
  8. 07/06 쥬뗌므: 지금 로그인을 안 한 상태라.. 암튼 시혼..
  9. 07/01 뮤즈: 삭이야..-_- 지력 100이면 갈량이잖아~!
  10. 07/01 뮤즈: 오홍~오수 누나 생일이였군~~늦었지만 ㅊ..

Trackback

  1. 2009 Cat's Cradle: Pandemic 2
  2. 2009 lukepark's me2DAY: Luke Park의 생각
  3. 2009 EQUILIBRIUM: 유럽, 오페라(Ophera) 웹 브라우저 불매..
  4. 2009 Mochaosu-story: 친구 소개 바통 no.2
  5. 2009 Great Inska: 구글 어플리케이션
  6. 2008 사과 속 자그마 한 세상: 파리넬리
  7. 2008 Mochaosu-story: 팔을 안으로 꺾었다.
  8. 2008 Comgoon's House: 네이버 나눔 글꼴 &amp; 웹폰트 설치
  9. 2008 iBlog: 웹폰트 완전정복!
  10. 2007 obbaya.com: 유명 도메인등록기관(D)의 도메인 절도사건

Link

  1. Mochaosu-story
  2. 순철그리기는 조각배