[쇼핑몰디자이너상식] 웹사이트에 웹폰트를 적용하여 보자

 

 

 

쇼핑몰이나 웹사이트에 웹폰트를 이용하여 웹폰트를 적용하는 방법을 알아보겠습니다.

 

상식적인 것을 알면 힘이 됩니다.

 

우선 세가지 폰트 포멧이 있습니다

 

1. woff : Web Open Font Format 위키에서 설명 보기
2. ttf : True Type Font 위키에서 설명 보기
3. eot : Embedded OpenType 위키에서 설명 보기
※ 참고 : 컴퓨터 글꼴에 대한 설명 위키에서 보기

 

그냥 참고만 하세요 ( ^^; )

 

1. 웹폰트를 서버에 업로드하여 웹폰트로 사용하는 방법

 

 

NanumGothic.eot

 

우선 위의 나눔폰트를 다운 받아서 쇼핑몰이나 웹사이트에 FTP를 통해 업로드 합니다. ( -> 경로 주의 하세요 )

 

그리고 스타일시트에 다음을 복사하여 붙여 넣으시면 전체적으로 적용이 가능합니다.

 

@font-face {font-family:nanum; src:url(./images/NanumGothic.eot)};
body{font-family:nanum; font-size: 14px;}

div{font-family:nanum; font-size: 14px;}

 

 

src:url(./images/NanumGothic.eot)}; <-- 여기가 웹폰트를 올려 놓은 경로입니다.

만약 경로 개념을 모르시면 절대경로로 하셔도 되요 ^^;;

 

2. fontface.kr 이 제공하는 http://fontface.kr/NanumGothic/css 파일로 적용하기

 

fontface.kr로 가서 보기 

 

 

http://fontface.kr/ 가셔서 글꼴을 선택하신 후에 소스코드를 복사하시고 사용하고 싶은 곳에다

CSS 속성만 붙여 주시면 됩니다.

 

 

 

영문 글꼴에 대한 부분은 역시! 구글에서 지원받을 수 있습니다.
구글에서는 이미 구글 웹 폰트 API를 제공하고 있기 때문입니다.
http://www.google.com/webfonts