분류 목록

    분류 전체보기 (1567)N
    남식이의 생활 이야기 (149)
    유용한 정보<휴대폰> (707)
    유용한 정보<컴퓨터> (665)N
    유용한 정보<기타> (46)

웹폰트를 쉽게 만드는 방법!

 2009년 05월 04일 현재 필자의 블로그에는 단조로운 맑은 고딕체를 적용하여 사용하고 있습니다.
 맑은 고딕체이외에도 다양한 폰트가 있지만 필자의 블로그에는 딱딱하면서도 부드럽게 느껴지는 맑은 고딕체를 적용하여 사용하고 있습니다. 글씨체의 변경만으로도 웹디자인을 조금 더 산뜻하게 바꿀 수 있다는 점은 상당히 매리트가 느껴지지 않을 수 없습니다.


웹폰트를 만들기 위한 준비물

 귀하가 원하는 웹폰트를 만들기 위해서는 아래의 준비물을 준비해주셔야 합니다.
WEFTIII2b1.exe myfont.rar 소야뜰9.rar
 깔끔한 웹폰트를 만들기 위해서는 상단에 첨부한 파일을 사용자님의 PC에 내려받아야 합니다. 물론, 소야뜰9는 사용자가 원하는 폰트로 대체하여 준비해주시면 됩니다.


Microsoft WEFT 프로그램 설치하기

웹폰트를 만들기 위해서는 Microsoft WEFT 프로그램을 사용자님의 PC에 설치해야합니다.

사용자 삽입 이미지▲ (예)를 눌러 다음단계로 넘어가자.사용자 삽입 이미지▲ Accept 버튼을 클릭하면 다음단계로 이동할 수 있다.사용자 삽입 이미지▲ 그냥 Next를 눌러 다음으로 넘어가자.사용자 삽입 이미지▲ Next를 눌러 다음으로 넘어가자.사용자 삽입 이미지▲ Database components를 선택한다.사용자 삽입 이미지▲ 설치중이다~ 므흣~사용자 삽입 이미지▲ 짜잔! 프로그램 설치 완료! 이제 웹폰트를 만들기 위한 프로그램의 설치는 모두 완료되었습니다.
 만약 프로그램을 설치할 때 'Database components'를 설치하지 않은 경우에는 다양한 문제점이 발생할 수 있다는 점을 잊지않기를 바랍니다.


웹폰트 준비물의 압축해제

 이제 웹폰트를 만들기 위한 준비물을 사용하는 방법을 짧고 간략하게 설명합니다.
1) 웹폰트로 만들 폰트의 설치
사용자 삽입 이미지▲ 폰트는 원도우즈가 설치된 폴더내의 Fonts폴더에 드레그하면 자동으로 설치가 됩니다.2) 준비물의 압축해제
 필자가 포스트에 첨부한 myfont.rar은 한글이 포함되지 않은 폴더에 넣어야만 Microsoft WEFT에서 정상적으로 찾을 수 있습니다. 또한 다운로드 받은 폰트는 myfont폴더에 넣어주면 찾기가 더욱 쉽습니다. (원래는 myfont.rar에 함께 넣으려다가 사용자님이 원하는 폰트를 넣을 수 있도록...)


웹폰트 만들기의 본격적인 시작!

* 이 사용기에서는 '소야뜰'을 예로 들어서 설명합니다.
사용자 삽입 이미지▲ 바탕화면에 만들어진 Microsoft WEFT를 실행합니다.사용자 삽입 이미지▲ 반갑다고 합니다. 그냥 다음!사용자 삽입 이미지▲ 아무거나 적고 다음버튼 클릭!사용자 삽입 이미지▲ 순서대로 설정한 후 준비물폴더에서 index.html선택후 다음!사용자 삽입 이미지▲ Skip analysis선택 후 다음버튼!사용자 삽입 이미지▲ Add클릭!사용자 삽입 이미지▲ 웹폰트로 만들폰트 선택 후 OK!사용자 삽입 이미지▲ 폰트 선택후 Subset을 선택합니다.사용자 삽입 이미지▲ 순서대로 진행합니다.사용자 삽입 이미지▲ 준비물 폴더에 있는 Subset-All선택사용자 삽입 이미지▲ 폰트 선택후 다음클릭!사용자 삽입 이미지▲ Show CSS @font-family declarations선택후 다음!사용자 삽입 이미지▲ 웹폰트를 사용할 주소를 입력 후 OK클릭!사용자 삽입 이미지▲ 뭔지 모르겠다. 그냥 다음클릭!사용자 삽입 이미지▲ 마침을 누르면 모두 완료된다!
 여기까지가 웹폰트 만드는 방법입니다.


웹폰트 사용을 위한 태그

<style type="text/css">
@font-face {font-family: 폰트이름; src:url(폰트가 올라간 주소);}
</style>
 웹폰트를 제작했다면 이제 귀하의 블로그 또는 홈페이지에 웹폰트를 적용하기 위한 태그를 입력해야 합니다.
 회색박스안의 내용 중 폰트이름은 폰트를 제작한 후 거의 마지막 과정에서 나타난 stand alone fonts의 폰트이름을 기재하여 주시고, 폰트가 올라간 주소에는 http://~/123.eot형식으로 기재하여 주시기 바랍니다. 이러한 수정과정을 모두 마치셨다면 HTML의 <head></head>사이에 넣어줍니다.
태그 : , ,

의견을 남겨 주세요

Powerd by Tistory, designed by criuce, modify by Namsik's Story
rss