I want to believe : ★ 블로그에 웹폰트를 사용해봅시다.

★ 블로그에 웹폰트를 사용해봅시다.

웹폰트를 사용해 봅시다....
인터넷 익스플로어에서만 사용할 수 있습니다.

파폭으로는 웹폰트가 안보여지더군요///

=====

@font-face {font-family:아무이름;src:url(웹폰트의 주소);}

일단 css 스크립트 맨위에 위 태그를 넣어줍니다.

(font-family:아무이름이나 지정해 주어도 상관없습니다.;src:url(웹폰트를 올린 계정의 주소);}

웹폰트를 올릴 계정이 있어야겠지요..

그리고 웹폰트를 사용할 부분에 font-family:아무이름 식으로 넣어줍니다...

font 크기를 지정할때 px 대신에 pt 로 바꿔줍니다. 왜 그런지는 모르겠지만 px 로 지정할 경우

.. 제 경우에는 웹폰트가 먹히지 않았습니다. 이부분은 저도 잘 ^^;;;

아래에 css는 제 홈에 사용한 css 전문입니다.

빈약한 설명이지만 참고해서 잘 바꿔보세요 ^o^;;

웹폰트는 이쁘고 멋진 무료 웹폰트가 많으니깐 쉽게 찾으실 수 있을거에요.

저는 엔터님의 엔터-솔잎9 체를 사용했습니다.

*css 보기

@font-face {font-family:myhappy;src:url(http://삐리리/enter_solip9.ewf);}BODY { BACKGROUND : #FFFFFF; MARGIN : 0PX;PADDING : 0PX; background-image:url(http://md.egloos.com/skn/img/b/00/03/5/pic2_ttbg.jpg);scrollbar-face-color:#ffffff; scrollbar-shadow-color:#006600 ;scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #ffffff;scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #ffffff;scrollbar-arrow-color: #FF9933; background-color:transparent;}
BODY,TD,DIV,LI { font-family:myhappy;FONT : 9PT/150%; COLOR : #333; }

A:LINK { COLOR: #336633; TEXT-DECORATION: NONE; }
A:VISITED { COLOR: #336633; TEXT-DECORATION: NONE; }
A:ACTIVE { COLOR: #336633; TEXT-DECORATION: NONE; }
A:HOVER { COLOR: #cccccc; TEXT-DECORATION: UNDERLINE; }

DIV.HEADER { FONT : 30px/100% Arial Black,돋움,HY견고딕;}

DIV.HEADER A:LINK { COLOR: #99CCCC; TEXT-DECORATION: NONE; }
DIV.HEADER A:VISITED { COLOR: #99CCCC; TEXT-DECORATION: NONE; }
DIV.HEADER A:HOVER { COLOR: #009999; TEXT-DECORATION: NONE; }

DIV.ADMIN A:LINK { FONT: 8PT tahoma; COLOR:#FFFFFF; TEXT-DECORATION: NONE;}
DIV.ADMIN A:VISITED { FONT: 8PT tahoma; COLOR:#FFFFFF; TEXT-DECORATION: NONE;}
DIV.ADMIN A:HOVER { FONT: 8PT tahoma; COLOR:#cccccc; TEXT-DECORATION: NONE;}

DIV.URL A:LINK { FONT : 8PT/120%; color:#97825A; TEXT-DECORATION: NONE;}
DIV.URL A:VISITED { color:#97825A; TEXT-DECORATION: NONE; }
DIV.URL A:HOVER { color:#97825A; TEXT-DECORATION: UNDERLINE;}

DIV.USERMENU { MARGIN-TOP : 20PX; TEXT-ALIGN : RIGHT; }

DIV.PROFILE { WIDTH : 150PX; PADDING : 0PX 0PX 10PX; LINE-HEIGHT : 150%; OVERFLOW : HIDDEN; }
DIV.MNTTL {SOLID; PADDING : 2PX 0PX 0PX; MARGIN : 25PX 0PX 10PX; FONT:BOLD}

DIV.POST { MARGIN-BOTTOM : 50PX; }
DIV.POST_HEAD {MARGIN-BOTTOM : 15PX; PADDING-BOTTOM : 3PX; }
DIV.POST_SUBJECT { FONT:BOLD ; color:#864718;}
DIV.POST_BODY { WIDTH : 500PX; MARGIN-BOTTOM : 30PX; OVERFLOW : HIDDEN; }
DIV.POST_TAIL { font-family:myhappy;FONT : 9PT ;color:#99cccc; MARGIN-TOP : 10PX; TEXT-ALIGN : RIGHT; }

DIV.COMMENT { BORDER : 1PX #D3D3D3 SOLID; BACKGROUND : #F7F7F7;background-image : url(http://pds.egloos.com/pds/1/200506/08/25/PanTa.gif);background-repeat : no-repeat;background-position : bottom right;
PADDING : 15PX; MARGIN : 20PX 0PX; }
DIV.COMMENT_BODY { MARGIN-BOTTOM : 20PX; }
DIV.COMMENT_TAIL { MARGIN : 8PX 0PX 5PX; font-family:myhappy;FONT :9PT/120% ; COLOR : #777; }
DIV.COMMENT_INPUT { MARGIN-TOP : 20PX; BORDER-TOP : 1PX #AAA DOTTED; PADDING-TOP : 20PX; }
DIV.COMMENT_LINE { BORDER-TOP : 1PX #AAA DOTTED; MARGIN : 10PX 0PX 15PX; }

/* 여기서 부터는 시스템에관한 클래스 이므로 변경하지 않으시는 것이 좋습니다. */

DIV.TRACK_TOP { LINE-HEIGHT : 170%; }
DIV.ARCHIVE_HEAD { FONT-WEIGHT : BOLD; MARGIN-BOTTOM : 10PX; }
DIV.ARCHIVE_BODY { font : 9pt; MARGIN : 20PX 0PX; LINE-HEIGHT : 160%; PADDING-BOTTOM : 100PX; }

IMG.IMAGE_TOP { MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_LEFT { MARGIN-RIGHT : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.IMAGE_MID { MARGIN-TOP : 15PX; MARGIN-BOTTOM : 15PX; }
IMG.BOOKMK { MARGIN : 10PX; BORDER : 0PX; }
IMG.USERMENU { MARGIN-LEFT : 8PX; }
IMG.LOGO { MARGIN-BOTTOM : 10PX; }

DIV.BANNER { MARGIN-TOP : 30PX; }

.SMALL { font-family:myhappy;FONT : 9PT; }
.DATE { FONT : BOLD 9PT/150% VERDANA, TAHOMA, 돋움; }
.TIME { FONT : 8PT/150% VERDANA, TAHOMA, 돋움; TEXT-ALIGN : LEFT; }
.AUTHOR { Font-family:myhappy;FONT : 9PT; }
.TXTFLD { FONT-SIZE:9PT;COLOR:#000; BORDER:1PX SOLID #666678; BACKGROUND:#FFF; }

/* 여기서 부터는 달력 및 XML에 관련된 클래스입니다. */

DIV.CAL_TOP { }
DIV.CAL { MARGIN : 20PX 0PX 20PX; WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_HEAD { WIDTH : 150PX; FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; PADDING : 4PX 0PX; MARGIN-BOTTOM : 10PX;}
DIV.CAL_BODY { WIDTH : 150PX; TEXT-ALIGN : CENTER;}
DIV.CAL_BOTTOM { }

.CAL { FONT : 7PT/170% VERDANA, 돋움; TEXT-ALIGN : CENTER; }
.CAL_DAY { FONT : BOLD 7PT/170% VERDANA, 돋움; TEXT-ALIGN : CENTER; }
.CAL_SUN { FONT : BOLD 7PT/170% VERDANA, 돋움; COLOR : #D36654; TEXT-ALIGN : CENTER; }
.CAL_SAT { FONT : BOLD 7PT/170% VERDANA, 돋움; COLOR : #3572A1; TEXT-ALIGN : CENTER; }
.CAL_TODAY { FONT : BOLD 7PT/170% VERDANA, 돋움; BACKGROUND :URL("http://pds.egloos.com/pds/1/200506/06/25/cal_bg.gif") ; COLOR : #FFCC00; TEXT-ALIGN : CENTER; }
.CAL_TR { }

DIV.XML { FONT : 8PT/150% VERDANA; TEXT-ALIGN : CENTER; }

# by 마이해피엔딩 | 2005/06/10 00:01 | about skin | 트랙백(3) | 핑백(1) | 덧글(13)

트랙백 주소 : http://browndewy.egloos.com/tb/224654
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]

Tracked from kiRis '' heRe at 2005/07/07 02:08

제목 : #. 이글루스 웹폰트 적용하기
★ 블로그에 웹폰트를 사용해봅시다....more

Tracked from 풀 메탈 페로's blog at 2005/07/25 00:21

제목 : 이글루에 웹폰트를 적용하기~
★ 블로그에 웹폰트를 사용해봅시다. 지식인에서 검색했을 땐 포스트 내부에만 적용할 수 있는 방법 밖에 없었는데, 밸리에서 검색해보니 웹폰트를 쓸 수 있는 방법이 적혀 있군요~ 쉬는 거 잠시 중단하고 웹폰트 적용 시작~m 웹폰트는 정9체, 광수체, 강B체, 아미체를 해볼려구요~...more

Tracked from 서기장 사생아의 비밀공.. at 2006/02/12 17:39

제목 : ★ 블로그에 웹폰트를 사용해봅시다.
★ 블로그에 웹폰트를 사용해봅시다. ...more

Linked at 와이 쏘 씨뤼어쓰? : 이글루.. at 2008/11/27 21:58

... 그에도 웹폰트를 적용하신 분들이 겁나게 부러웠는데 엄두를 내지 못하다가. 점심시간에 갑자기 적용해볼까 싶어서 이리저리 뒤적거린 후에 PPoZZak님의 포스팅과 마이해피웨딩님의 포스팅을 참고로 뚝딱거려봤는데 (본 사람도 있겠지만) 링크 색은 시퍼렇게 변해버리고 덧글은 어두워지고 (결단코 내가 건드린 것은 글꼴 적용 부분 뿐인뒈!) ( ... more

Commented by alucard at 2005/06/10 14:26

헤헤 방금 저도 웹폰트 추가 시켰다죠.ㅋ

Commented by 엘루아 at 2005/06/10 14:36

그런데 웹폰트 추가시키면 웹폰트 불러들이는 시간 때문에 계정 속도 여하에 따라 심각하게 페이지 로딩이 느려지는 경우도 있어서요.
그런 이유로 저는 보류했다는...ㅠ_-

Commented by 마이해피엔딩 at 2005/06/10 17:36

알루카드님// ㅎㅎ 알루카드님 원래 웹폰트도 이뻐요~ ^^
엘루아님// 네. ^^ 그런 문제점도 있죠. 저는 5년전부터 사용하던 무료 웹계정이 속도가 정말 빨라서;;

Commented by alucard at 2005/06/10 19:54

웹폰트가 없을때 속도가 느린거 아닌감요.느린적 한번도 없음.
킬킬

Commented by 마이해피엔딩 at 2005/06/12 15:05

아.이게 로딩이 느린 웹폰트가 있다고 그러네요..제작상의 실수,버그 정도?

Commented by 상먀애인 at 2005/06/17 22:43

좋네요~~ 웹폰트계정은 이글루스 계정에 올리는게 최고인듯 하네요~ ^^

Commented by kiRis at 2005/07/07 02:06

정말 감사해요,,
웹폰트 때문에 혼자 끙끙되고 있었는데~ ^^

Commented by neoeyeblue at 2005/07/09 19:39

정말 감사합니다. 많은 도움이 됐어요. 웹폰트를 변환시킬수 있었다니... ^^
Css 내용중 달력에 Today 표시를 해주는 것을 써보고 싶은데... 괜찮을까요?

Commented by 마이해피엔딩 at 2005/07/14 18:14

네.. 마음껏 사용하세요~

Commented by 퓨라셀레네 at 2005/08/24 17:18

웹폰트 적용, 많이 배워갑니다 ^-^
링크 해갈게요~

Commented by 환이 at 2005/10/05 21:07

웹폰트를 계정에 올려서 위에 적힌방법대로 해보았는데
몇번이나 해봐도 안먹히더라구요ㅠㅠ(굴림체로만 나와요;_;) 대체 문제가 뭘까요;;?
첨엔 단순히 호기심으로 바꿔보려고 했는데 이제 오기가 생기네요;
꼭 알아내서 바꿔보고야 말겠다는...-.-
마이해피엔딩님, 도와주세요오~0ㅁ0;;
(방문하자마자 질문먼저 남겨서 죄송해요^^;)

Commented by 루나스타 at 2005/10/24 11:27

우흐흐흐 저도 환이님이랑 같은 문제인데용;ㅡ;
왜 안바뀌는거죠;;ㅁ;;

Commented by oozu at 2008/11/27 21:32

아 보실지 모르겠지만, 덕분에 웹폰트 적용 잘 했습니다.
감사합니다.