ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • WebFont (웹폰트) 만드는법
    미사용/##컴퓨터-프로그램 팁 2009. 7. 11. 21:32

    WebFont란 ?
    
    webfont는 웹페이지의 글꼴을 컴퓨터에 특정 글꼴이 설치되어 있지않아도 해당 글꼴을 볼 수 있는 글꼴파일의 일종입니다. 쉽게말해서 웹페이지에 사용되는 폰트인거죠. 보통 블로그에 잘 쓰이지요. 저같은 경우는 현재 블로그 타이틀 부분을 웹폰트로 적용해서 있습니다. 웹 폰트의 장점이라고 하면 당연히 다른사람의 컴퓨터에 없는 폰트도 웹 상에서는 해당 폰트로 보인다는 것이죠. 블로그를 방문하는 사람마다 글꼴을 설치하는 불편함이 없어지니깐요.

    WebFont를 따로 만들어서 다운받는 사이트도 있던데 그것보단 직접 만드는게 더 편하지 않을까 하네요.. ㅎ

    준비물 : 폰트, Microsoft WEFT, 보조파일

    ※ 웹폰트라고 해도 유료폰트는 저작권때문에 하면 안된다고 하네요. 가급적이면 무료폰트를 이용해 주시기 바랍니다.

    Microsoft WEFT 다운로드
    위 사진에 폴더를 빼고 Index.html 파일과 subfile.sub 파일만 있으면 됩니다. 저 폴더들은 제가 만든 웹폰트들이에요. 준비작업은 끝났습니다. 이제 본격적으로 시작을 해 보도록 하죠 !

    Microsoft WEFT를 실행시켜 주시기 바랍니다.
    꼭 저런 문구가 아니더라도 처음 실행시 뜨는 메ㅔ지 박스는 그냥 전부 아니오를 클릭 해 주시기 바랍니다. ^_^

    처음 실행하시는 분들은 위에 아니오 버튼을 클릭하시면 바로 이런 창이 뜰껍니다. 다음 버튼을 클릭하시구요.!

    여기에 자신의 이름과 이메일 주소를 적습니다. 어차피 형식적인 거니 그냥 적으시면 되겠습니다.

    * 여기 2 장의 사진은 http://blog.naver.com/heedong2?Redirect=Log&logNo=60007127888 에서 가지고온 사진임을 밝힙니다.
    저 화면에서 왼쪽 콤보박스를 file 로 수정해 주신 후에 오른쪽 ... 을 클릭해 주시기 바랍니다.


    그러면 뜨는 창에서 준비작업에서 WebFont 폴더에 압축을 푼 index.html 파일을 선택해서 열기 버튼을 클릭 해 주시기 바랍니다.


    그리고 Don not add linked pages 에 체크를 한 후에, 다음 버튼을 클릭해 계속 해 나가 봅시다.


    저기 Skip analysis 에 체크를 하신 후에 계속해서 다음 버튼을 클릭합니다.


    폰트를 선택하는 곳 입니다. Add를 클릭해서 웹폰트로 만들 폰트를 추가 시켜두세요. (한번에 여러개가 가능은 하지만 나중에 뭐가 무슨 폰트의 웹폰트인지 모릅니다...)


    저는 휴먼 편지체를 선택했습니다. 오른쪽에 있는 건 폰트 모양입니다. 일반, 굵기, 이탤릭, 굵은이탤릭 이 있네요.


    이렇게 됬다면 Subset 버튼을 클릭해줍니다.


    Load 버튼을 클릭 해주시구요.


    파일 형식을 All files 로 맞춰서 subfile.sub파일이 보이게 한다음 subfile.sub를 선택해서 열기 버튼을 클릭합니다. 그리고 OK 버튼을 클릭 하고 다음 버튼을 클릭해서 계속 진행을 해 주세요.


    file:// 부분은 웹폰트가 만들어질 경로를 설정하는 곳 입니다. 따로 폰트폴더를 만들어 정리해야 햇갈리지 않고 나중에 편합니다.
    Show CSS @ font-family declarations. 에 체크를 한 후에 Edit 버튼을 클릭해서 자신이 만든 웹폰트가 쓰일 곳의 주소를 써 주시기 바랍니다.


    http://옆에 자신이 쓸 곳의 주소를 적은 후에 add 버튼을 클릭해서 추가를 해 줍니다. 정확하게 해야 웹폰트가 올바르게 적용이 됩니다. !  Ok 버튼을 클릭한 후에 다음 버튼을 눌러 계속해서 진행을 해주세요.


    조금 기다리면 위와 같은 창이 뜨는데요,
    위와 같은 창이 뜨면 Close 버튼을 클릭해서 닫아주시기 바랍니다.


    이제부턴 쉽습니다. 다음 버튼을 클릭하세요.



    마침 버튼을 클릭하면 끝입니다.


    저기 보시면 DBFNT0.eot 파일이 생겻는데요. 이게 바로 웹폰트 파일입니다. 저런식으로 이름이 따로 지정되서 나오기 때문에 나중에 파일이 많아지면 뭐가 어떤 폰트의 웹폰트파일인지 정말 모릅니다. 그러니 저 스샷처럼 따로따로 폴더를 만들어서 정리하면 햇갈리지도 않고 좋습니다. ^_^

    티스토리에 적용방법은 나중에 따로 포스트를 올리도록 하겠습니다

    댓글

Designed by Tistory.