일반 폰트 -> 웹폰트로 변환하여 웹에 적용시키기
로빈아빠
본문
| 웹폰트는 왜 필요한가? |
?블로그나 홈페이지를 운영하다 보면 기본으로 제공하는 폰트 이외에 자신이 평소에 즐겨 쓰는 폰트나 웹사이트에 어울리는 폰트를 원하게 됩니다. 윈도우 폰트는 .ttf 포멧 형식이고, 웹폰트는 .eot 폰트로 윈도우 폰트를 웹에서 직접 사용하는 것은 안됩니다. eof 형식으로 변환을 해야 웹에서 사용할 수 있습니다.
| 폰트는 어디에서 구하는가? |
저의 컴퓨터에 설치되어 있는 폰트의 종류는 247가지가 됩니다. C:\WINDOWS\Fonts 폴더로 이동하시면 윈도우에 설치된 폰트의 종류를 볼 수 있습니다.
☜ 제 윈도우 폰트 목록
window_fonts.txt웹폰트로 변환하기 위해서는 우선 폰트를 구해야하는데 예쁜폰트는 유료로 많이 팔고 있습니다. 유료 폰트도 좋지만 무료로 폰트를 제공하는 사이트도 많이 있습니다. 제가 알고 있는 무료 폰트 제공 사이트를 올리니 참고하시기 바랍니다.
| http://www.1001fonts.com/ http://www.dafont.com/ 아이티스터디 조선일보 서체 나눔글꼴 소야홈 |
| 웹폰트는 어떻게 변환하나? |
윈도우 폰트를 웹폰트로 변환하기 위해서는 변환 프로그램을 사용해야 합니다. 제가 사용하느 프로그램은 MS에서 무료로 배포하는 프로그램인 WEFT 입니다.
| 1. WEFT 설치 |
?
WEFT 를 설치하기 전에 준미물은 다 준비하셨는지 체크하시는 거 잊지마세요.
WEFT 를 설치하다 보면 Components 설정에 Database componerts 항목을 체크하셔야 합니다. 체크를 하지 않으면 많은 문제점이 생길 수 있으니 미리 방지하시는 게 좋겠죠.
예를들어 폰트목록에 폰트가 제대로 표시되지 않기도 합니다.
WEFT 를 설치하기 전에 준미물은 다 준비하셨는지 체크하시는 거 잊지마세요.
WEFT 를 설치하다 보면 Components 설정에 Database componerts 항목을 체크하셔야 합니다. 체크를 하지 않으면 많은 문제점이 생길 수 있으니 미리 방지하시는 게 좋겠죠.
예를들어 폰트목록에 폰트가 제대로 표시되지 않기도 합니다.
| 2. WEFT 시작 |
?
1. file:// 선택 → 2. 웹폰트에 필요한 자료 파일의 index.html 을 지정한다.
Skip analysis 체크한다.
다운받은 폰트를 C:\WINDOWS\Fonts 에 붙여넣기 하시면 글꼴이 생성됩니다.
1. Add 클릭 → 2. 나눔고딕 선택 → 3. 확인
1. 선택한 폰트를 클릭한다.( ? 로 표시되는 것을 볼 수 있다. ) → 2. Subset 클릭
1. Hangul 선택 → Load 클릭
1. All files 선택 → 웹폰트에 필요한 자료 파일의 Aubset-All 클릭
Show CSS @font-family declarations 체크한다.
C:\myfont 폴더 안에 DBFNTO.eot 파일이 생성 되었을 것입니다. 밑줄친 2가지는 꼭 기억하고 웹 페이지에서 설정하실때 써야 합니다.
| 웹 페이지 웹폰트는 어떻게 적용하나? |
생성된 eot 파일을 웹페이지에 업로드 해야합니다.
티스토리 기준으로 관리자 → 스킨 → 파일 업로드 를 클릭하여 eot 파일을 업로드하면 됩니다.
HTML/CSS 편집 skin.html 의 <head> 와 </head> 사이에 아래의 코드를 삽입해 주세요.
<style type="text/css">
@font-face {font-family: 폰트 이름; src:url(폰트 위치);}
</style>
빨간글씨로 표시한 폰트 이름은 eot 파일을 만들때 생성된 폰트이름을 적고, 폰트 위치 는 폰트를 업로드한 곳의 url을 적으시면 됩니다.@font-face {font-family: 폰트 이름; src:url(폰트 위치);}
</style>
웹 페이지 전체 글꼴 수정
<style type="text/css">
@font-face {font-family: 폰트 이름; src:url(폰트 위치);}
body {font-family:폰트 이름; font-size: 12px:}
</style>
<style type="text/css">
@font-face {font-family: 폰트 이름; src:url(폰트 위치);}
body {font-family:폰트 이름; font-size: 12px:}
</style>
style.css 에서 원하는 부분을 찾아서 그 부분만 폰트를 바꾸실 수 있습니다.
관련링크
- http://pangsan.tistory.com/102 1098회 연결
댓글목록
등록된 댓글이 없습니다.