[ WebFont ] 나눔고딕 WebFont 만들기

■ 주의사항 :
1. 아래의 진행 순서를 지켜서 진행할 것.
2. 윈도우 비스타 ( No ), 윈도우 XP ( Yes )
■ 일반적인 트루타입( .TTF ) 폰트를 웹폰트 ( .EOT ) 로 변환하는 작업
 
■ 첨부파일 "WEFTIII2b1.exe" 를 다운 받아 설치를 한다.
http://postfiles13.naver.net/20110811_268/minineko_1313043151356Wx8AE_JPEG/%C8%AD%B8%E9%C4%B81.JPG?type=w2
 "Database components" 에 체크하고 설치합니다.
 
■ 첨부파일 "myfont.zip"를 다운받아 압출 푼다.
압축을 푸는 폴더명은 반드시 영문이어야 합니다. ( 권장 : D:/myfont )
 
■ 이제 Microsoft Weft 프로그램을 실행합니다.
http://postfiles8.naver.net/20110811_135/minineko_1313043794114yx7GA_JPEG/%C8%AD%B8%E9%C4%B82.JPG?type=w2
"아니오"를 클릭합니다.
만약에 "예"를 선택해서 Font Datablase 를 불러올 경우 새로 설치할것.
 http://postfiles11.naver.net/20110811_42/minineko_1313043868839ItRNs_JPEG/%C8%AD%B8%E9%C4%B83.JPG?type=w2

아무 이름이나 이메일을 입력하고 "다음" 클릭
 http://postfiles2.naver.net/20110811_241/minineko_1313043919755i7TrW_JPEG/%C8%AD%B8%E9%C4%B84.JPG?type=w2

"..." 를 클릭 압축을 풀었던 폴더 안의 index.html 을 열고 "다음"
 http://postfiles15.naver.net/20110811_158/minineko_1313043996874KXSY2_JPEG/%C8%AD%B8%E9%C4%B85.JPG?type=w2

"Skip analysis" 체크 하고 "다음"
 http://postfiles6.naver.net/20110811_21/minineko_13130440421011VdIw_JPEG/%C8%AD%B8%E9%C4%B86.JPG?type=w2

"Add..." 클릭
웹폰트로 만들려고 하는 폰트를 선택
 http://postfiles2.naver.net/20110811_257/minineko_1313044117666GUKcQ_JPEG/1.jpg?type=w2

"Subset..." 클릭 새로운 창이 뜬다.
 http://postfiles4.naver.net/20110811_291/minineko_1313044220279Qi1rG_JPEG/%C8%AD%B8%E9%C4%B87.JPG?type=w2

"Load" 를 누른 후 파일타입을 All files 로 바꾸고 폴더 안의 "Subset-All.txt" 를 선택합니다.
위의 Language 탭을 "Hangul" 로 선택해준 후, "OK" 를 누른다.
 http://postfiles12.naver.net/20110811_27/minineko_1313044359393crUgo_JPEG/%C8%AD%B8%E9%C4%B88.JPG?type=w2

"Edit..." 를 누르고 웹폰트를 사용하고자 하는 도메인 주소를 추가한 후, 아래 표시된 부분을 체크한 후, "다음"
 http://postfiles7.naver.net/20110811_134/minineko_1313044454391pwJxG_JPEG/%C8%AD%B8%E9%C4%B810.JPG?type=w2

폰트가 생성되면서 위와 같은 스타일 시트가 나옵니다.
나중에 폰트를 적용할 때 폰트 이름은 반드시 저기에서 나온 이름으로 적용해야 합니다.
밑줄친 부분이 아주 중요합니다.
myfont 폴더에 가면 웹폰트 파일이 만들어져 있습니다.
 
{Stand alone fonts}
<STYLE TYPE="text/css">
<!-- /* $WEFT -- Created by: minineko (minineko@nate.com) on 2011-08-11 -- */
  @font-face {
    font-family: 나눔;
    font-style:  normal;
    font-weight: normal;
    src: url(file:///D:myfontDBFNT0.eot);
  }
 
----------
 
  @font-face {
    font-family: 나눔고딕 Extra;
    font-style:  normal;
    font-weight: normal;
    src: url(file:///D:myfontEXTRA0.eot);
 
----------
 
/* WEB FONT */
@font-face {
 font-family: 나눔고딕;
 src: url(/minineko/_font/DBFNT0.eot);
}
@font-face {
 font-family: 나눔고딕 ExtraBold;
 src: url(/minineko/_font/EXTRABO0.eot);
}
/* GLOBAL */
* {
 font-family : 나눔고딕;
 /* font-family : 나눔고딕 ExtraBold; */
 font-size : 12px;
 color : #333333;
 /* SCROLLBAR IE */
 //overflow:auto;
 scrollbar-arrow-color:#9D9992;
 scrollbar-3dlight-color:#D4D0C8;
 scrollbar-darkshadow-color:#D4D0C8;
 scrollbar-face-color:#FFFFFF;
 scrollbar-hightlight-color:#FFFFFF;
 scrollbar-shadow-color:#FFFFFF;
 scrollbar-track-color:#EAE7E1;
}
/* SCROLLBAR Chrome Safari */
::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url("./images/bg.png") #efefef}
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}

body {
 margin : 0px;
}
/* LINK */
A:link { text-decoration:none; }
A:visited { text-decoration:none; }
A:hover { text-decoration:none; }
A:active { text-decoration:none; }
 
 
■ 참고 : 나눔고딕을 웹폰트로 적용하여 사용하는 것은 라이센스상 문제가 없다고 함.