1. PC에 폰트 설치하기
웹폰트 무료 다운로드 사이트에서 웹폰트를 다운받는다
예) http://soyafont.com
받은 soya_godun10.ttf 파일을 글꼴(시작-제어판-글꼴) 폴더에 드래그해서 넣으면 폰트가 설치됩니다.
(그 외 받은 폰트를 같은형식으로 해주시면 설치가 됩니다.)
2. 포토샵에서 사용하기(그 외 받은 폰트를 같은형식으로 해주시면 설치가 됩니다.)
폰트목록에서 폰트를 선택한 후 받은폰트의 사이즈가 9pt일경우 포토샵에서는 사이즈를 12pt로 하고 안티앨리어싱은 None으로 해서 사용합니다.
3. 웹폰트로 만들기'웹폰트 변환' 메뉴를 이용하세요.
☞ 웹폰트 변환 바로가기
4. 사이트에 웹폰트 적용하기☞ 웹폰트 변환 바로가기
트루타입파일을 웹폰트 파일로 만들었다면 웹폰트파일을 각각 해당폰트 이름으로 바꾸어 줍니다.
(예: DBFNT0.EOT → soya_godun10.eot)
이름을 바꾼 웹폰트파일을 파일을 홈페이지 계정에 올립니다.
(예: http://www.ilsancity.com/webfont/soya_barun9.eot)
soyabarun9.eot 는 웹페이지에서 사용할 수 있는 폰트파일로서 자신의 홈페이지 적용할 수 있습니다.
올린 웹폰트를 페이지에 적용시키려면
<style type="text/css">
<!--
@font-face {font-family: 소야바른체; src:url(http://my.netian.com/~ysnet/soya_barun9.eot);}
a:link {font-family: 소야바른체;font-size: 9pt;}
a:visited {font-family: 소야바른체;font-size: 9pt;}
a:hover {font-family: 소야바른체;font-size: 9pt;}
a:acvite {font-family: 소야바른체;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: 소야바른체;font-size: 9pt;}
-->
</style>
위의 소스를 적용시키고자 하는 페이지의 <head> </head> 사이에 넣어주시면 됩니다.
링크나 다른부분에 적용할 때는 스타일에 font-family: 소야바른체; font-size: 9pt; 를 넣어주세요.
※ 위의 경우 소야바른체의 예를 들었으며 다른폰트를 사용하였을 경우 해당폰트의 이름과 사이즈를 넣어주세요.(빨간글 부분)
웹폰트 2개이상 적용시키는법
<head>와 </head> 사이에 아래의 소스를 넣어주세요.
<style type="text/css">
<!--
@font-face {font-family:첫번째폰트이름; src:url(첫번째폰트주소)}
.첫번째폰트이름 {font-family:"첫번째폰트이름";font-size:10pt}
@font-face {font-family:두번째폰트이름; src:url(두번째폰트주소)}
.두번째폰트이름 {font-family:"두번째폰트이름";font-size:10pt}
-->
</style>
넣으신 다음에 폰트이름과 주소를 넣으주세요. 그다음에 폰트를 사용할 글 앞에 폰트테그를 넣어주세요.
예를들어
<font class=첫번째폰트이름>여기는 쿠키홈입니다.</font>
<font class=두번째폰트이름>여기는 쿠키홈입니다.</font>
웹폰트 적용사례 : 소야다듬체9pt, 소야얼음체10pt
(예: DBFNT0.EOT → soya_godun10.eot)
이름을 바꾼 웹폰트파일을 파일을 홈페이지 계정에 올립니다.
(예: http://www.ilsancity.com/webfont/soya_barun9.eot)
soyabarun9.eot 는 웹페이지에서 사용할 수 있는 폰트파일로서 자신의 홈페이지 적용할 수 있습니다.
올린 웹폰트를 페이지에 적용시키려면
<style type="text/css">
<!--
@font-face {font-family: 소야바른체; src:url(http://my.netian.com/~ysnet/soya_barun9.eot);}
a:link {font-family: 소야바른체;font-size: 9pt;}
a:visited {font-family: 소야바른체;font-size: 9pt;}
a:hover {font-family: 소야바른체;font-size: 9pt;}
a:acvite {font-family: 소야바른체;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: 소야바른체;font-size: 9pt;}
-->
</style>
위의 소스를 적용시키고자 하는 페이지의 <head> </head> 사이에 넣어주시면 됩니다.
링크나 다른부분에 적용할 때는 스타일에 font-family: 소야바른체; font-size: 9pt; 를 넣어주세요.
※ 위의 경우 소야바른체의 예를 들었으며 다른폰트를 사용하였을 경우 해당폰트의 이름과 사이즈를 넣어주세요.(빨간글 부분)
웹폰트 2개이상 적용시키는법
<head>와 </head> 사이에 아래의 소스를 넣어주세요.
<style type="text/css">
<!--
@font-face {font-family:첫번째폰트이름; src:url(첫번째폰트주소)}
.첫번째폰트이름 {font-family:"첫번째폰트이름";font-size:10pt}
@font-face {font-family:두번째폰트이름; src:url(두번째폰트주소)}
.두번째폰트이름 {font-family:"두번째폰트이름";font-size:10pt}
-->
</style>
넣으신 다음에 폰트이름과 주소를 넣으주세요. 그다음에 폰트를 사용할 글 앞에 폰트테그를 넣어주세요.
예를들어
<font class=첫번째폰트이름>여기는 쿠키홈입니다.</font>
<font class=두번째폰트이름>여기는 쿠키홈입니다.</font>
댓글 없음:
댓글 쓰기