태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

이사짐 정리하다가, 밝견된 책들을 물끄러미 쳐다 보다가 제일 먼저 읽어 버리자고 선택한 책. 큼지막한 글씨체에, 부담 없는 책장 수가 선택을 하게 만들더라. 그리고 정지영 파동.....


싸이 월드나 그 외 다른 곳에서 하는 것 처럼, 웹 폰트를 넣어 주고 싶은 욕구가 생기더군요!
어느날 갑자기! -_- 그래서 이것 저것 뒤져보다 적용하고, 배운거 정리해 놓습니다 ^-^;
(게다가 이건 공짜니까요!)

웹 폰트를 홈페이지에 적용 시키는 방법은 다음과 같이 따라 하시면 됩니다 ^-^


1. 우선은 웹 폰트가 있어야 겠죠?


다운 받는 방법은 다음과 같습니다.

1. 포털등에서, 검색을 한다. (무료 웹 폰트)
2. 마음에 드는 폰트를 선택한다.
3. 다운을 받는다.
4. 다운 받으면 보통 압축이 되어 있는데 압축을 풀고, 파일을 확인한다.
5. 확인된 파일중에서 TTF 파일이 아닌 EOF(보통은 EOF) 혹은 EWF, DWF등의 파일을 체크한다.

Tip :  아마도 제작자가 표시를 해 놨을거에요 ^-^
         웹에서 사용하는 폰트체라구요 ^-^

2. 직접 만든 웹폰트 파일을 자신의 계정에 업로드 합니다.

예만 들면서 하기엔, 약간의 무리가 있는 듯 해서 간단한 설명만 적어 놓겠습니다.
여러분들이 웹에서 홈페이지를 만드실때, 필요한 파일들을 서버 상에 넣어 두시잖아요?
그 서버내에 아무곳이나 (이왕이면 구별하기 쉽게 폴더를 만들어 두시면 좋구요!) 넣어두시구요!

폰트 파일의 URL을 체크합니다.

자 이제 예를 들면, 필자가 사용하고 있는 Tistory 계정을 예를 들게요-

1. font.eof라는 폰트 파일을 계정에 올립니다.
2..Tistory는 스킨 편집 부분을 통해서 계정에 접속하실 수 있어요.
(다른 분들은, FTP등을 이용하시면 될 듯 하구요 ^-^)
3. Tistory 관리자 계정에 접속을 하시고, 스킨 편집에 들어 가시면 아래 스킨 1단, 2단 등
찾는 부분에 직접 올리기가 있답니다!
4. 클릭해서 들어 가시면, 계정에 올리는 메뉴가 나와요!
5. 폰트 파일을 찾아서 올립니다.
6. 폰트 파일의 경로는 http://블로그 주소/images/font.eof 가 됩니다.
 (다른 분들은, 그냥 http://블로그 주소/font.eof
  혹은 http://블로그 주소/만든폴더/font.eof 가 웹 폰트의 주소가 되겠지요 ^-^)




3. 자신의 계정에 올려 놓으셨다면 거진 완성입니다! 이제 적용만 시키시면 되요!

다음은 적용시키는 소스 입니다. (폰트의 주소는 티 스토리 계정을 예 든거에요!)
박스 안의 소스를 웹폰트를 적용시킬 홈페이지의 <head></head> 사이에 넣어주세요.


<style type="text/css">
<!--
@font-face {font-family: 폰트체(원하시는이름을 적어주세요!); src:url(http://블로그 주소/images/font.eof (폰트의 주소입니다!) 
);}
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 ;}  (동작시)
-->
</style>

그 다음 자신이 원하는 부분마다

<font style='font-family:폰트체; font-size:9pt;'> 와 같은 형식으로 사용하시면 됩니다. 즉, 저 태그를 쓰시고, 글씨를 쓰시면 된다는 말이지요 !

간단한 TIP : CSS파일을 사용 하실 줄 아신다면!
CSS 파일에, 위의 박스 소스중, <!--><--> 사이의 소스를 넣어주세요- ^-^
그리고 CSS 파일을 이용해서 font-family에 폰트 명을 넣어줘서 사용 할 수 있답니다.

Tistory 사용자라면, 스킨 편집에서 적용하면 되겠지요! ^-^

  TIP : 혹시 몰라서, CSS에 적용시키거나, 시스템의 문제로, 주소 전체가 적용
         이 안되는 경우가 있더군요- 그런 경우 웹 폰트 주소를 상대 주소(서버입장
         에서)로 바꾸어 주시면 됩니다. 방법은 위의 예로 설명하면,
        ./images/font.eof 같이 앞에 콤마로 써주시면 상대주소가 되요!
        (블로그의 주소부분을 의미합니다!)



TIP :  웹폰트는 http://soyafont.com에서 배포하는 '소야체'가 추천되더군요-


TIP :  파이어 폭스와 오페라에서 테스트해 본 결과 적용되지 않는군요-!

posted by Daniel.H.Kim