웹폰트 적용 방법 및 ttf 파일 eot 로 변환 방법

http://gby05.tistory.com/1576



eotfast-2-22-10.zip


이번에는 개인홈페이지나 블로그 등에 웹폰트 적용하는 방법 및  ttf 파일 eot 로 변환 방법을 알려드립니다.
익스플로러 웹폰트가 맘에들지않는다면 다른폰트로 바꿔보세요.

먼저 윈도우폰트파일을 웹에서 사용하기 위해서 TTF 파일을  EOT 파일로 변환하셔야합니다.

윈도우파일 폰트파일들은 C:\WINDOWS\Fonts 폴더안에 안에있습니다. 

TTF 파일을  EOT 파일로 변환해주는 프로그램은   http://www.eotfast.com/ 여기서 받을수 있습니다.

들어가서 Free Download 를 누르면 다운받을 수있습니다.

사용법은 간단합니다. 압축풀고 변환하려는 ttf 파일을 호랑이 아이콘 프로그램에 드래그 해서 올려놓만 하면 자동으로 변환됩니다. 실행하지 않으셔도됩니다.. 그럼 ttf파일을 eot 파일로 변환이 됩니다...

그파일을 웹서버에 올리시고 올린 웹폰트 주소를 복사해서 아래 소스에 적용시키시면됩니다.

 

 

<style type="text/css">
<!--@font-face {font-family:웹폰트이름; src:url(웹폰트주소);}
body {font-family:웹폰트;font-size:9pt;line-height:150%;} -->
</style>

 

 

홈페이지 상단에 위에 소스를 추가해주시면됩니다..

이소스를 어디에 추가하냐면은 <head> </head> 사이에 넣어주시면됩니다.

아래와같이 적용 해주시면됩니다...

 

<!doctype html>
<html>
<head>

 

<style type="text/css">
<!--@font-face {font-family:CY68994_10; src:url(http://cyimg8.cyworld.nate.com/img/mall/webfont/CY68994_10.eot);}
body {font-family:CY68994_10;font-size:9pt;line-height:150%;} -->
</style>


</head>

<body>

</body>

 nbsp;

이렇게 추가해주시고 웹페이지를 열어보시면 폰트가 다 바뀌었을거에요. ^^

그런데 웹폰트를 사용하면 홈페이지 로딩속도가 느려질 수 있습니다.

특히 네이버 폰트를 사용할경우 로딩속도가 엄청느립니다.

네이버폰트는 가급적 사용하지 않는것이 좋습니다..

 

 

 

 

 

 

 

익스플로러 9은 웹폰트로 EOT(Embedded OpenType)와 WOFF(Web Open Font Format)파일을 지원합니다.

 

EOT 형식이 잘 안된다면, WOFF 형식을 익스플로러 9에 사용해보세요.

 

WOFF는 EOT처럼 CSS를 사용해서 임의의 폰트를 웹 페이지에 적용할 수 있는 웹폰트 중의 하나로, EOT 형식은 익스플로러 4~8 에만 웹 폰트가 적용되지만, WOFF 형식은 최신 브라우저인 익스플로러 9, 파이이폭스3.6+, 크롬 6+에서 지원하는 웹 폰트 형식입니다.

 

그럼, NanumGothic.ttf(나눔고딕) 파일을 WOFF 형식으로 변환하여 웹 페이지에 적용하는 방법을 설명드리겠습니다.

 

1. 파이어폭스나 크롬은 TTF 형식을 바로 웹 폰트로 사용할 수 있지만, 익스플로러 9은 TTF 형식을 지원하지 않으므로 TTF 파일을 WOFF 파일로 변환해야 합니다. TTF를 WOFF로 변환하기 위해서 "sfnt2woff"라는 프로그램을 이용합니다.

 

"sfnt2woff"는 아래 주소에서 다운로드하세요. 웹페이지의 for Windows라고 써져 있는 부분을 클릭하시면 됩니다.

 

http://people.mozilla.org/~jkew/woff/

 

 

 

 

2. WOFF 형식으로 변환할 NanumGothic.ttf 파일과 다운 받은 sfnt2woff.exe 파일을 같은 폴더에 놓고 NanumGothic.ttf 파일을 sfnt2woff.exe 파일 위로 드래그 & 드롭합니다.

 

 

 

 

 

   

3. 그러면 같은 폴더에 WOFF 파일이 만들어집니다.

 

 

 

4. 이렇게 만든 WOFF 파일을 웹 페이지에 웹 폰트로 적용합니다. 코드는 아래와 같습니다.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<style type="text/css">
@font-face {
    font-family: NanumGothic;
    src: url('images/NanumGothic.eot'); /* IE 4-8 */
    src: url('images/NanumGothic.eot?') format('eot'), /* IE 9 */
           url('http://mireene.com/test/NanumGothic.woff') format('woff'); /* IE 9, Firefox 3.6+, Chrome 6+ */
}
body {
    font-family: NanumGothic;
    font-size: 10pt;
    line-height: 21px;
}
</style>
</head>

<body>
<p>익스플로러 9 이전 버전에서는 src: 에 여러 글꼴을 지정하면 로드 실패로 404 오류를 반환한다. 원인은 익스플로러가 괄호 시작부터 끝까지를 로드하려고 하기 때문이다.</p>
<p>그래서 이 문제를 방지하기 위해 eot 끝에 "?"를 추가한다. 이렇게 하면 익스플로러는 "?" 나머지 부분을 쿼리 문자열로 인식하여 나머지 WOFF 파일의 처리를 무시한다. 즉, eot 파일만 로드하도록 익스플로러를 속이는 것이다.</p>
</body>
</html>

 

5. 아래는 파이어폭스에서 위 코드를 실행한 모습입니다. IE 9 은 직접 적용해서 확인해보세요.

 

신고
Posted by 海天(해천)
크리에이티브 커먼즈 라이선스

이 게시물은 크리에이티브 커먼즈 저작자표시-비영리
3.0 Unported 라이선스
에 따라 이용할 수 있습니다.
작은 일도 무시하지 않고 최선을 다해야 한다. 작은 일에도 최선을 다하면 정성스럽게 된다. 정성스럽게 되면 겉에 배어 나오고, 겉에 배어 나오면 겉으로 드러나고, 겉으로 드러나면 이내 밝아지고, 밝아지면 남을 감동시키고, 남을 감동시키면 이내 변하게 되고, 변하면 생육된다. 그러니 오직 세상에서 지극히 정성을 다하는 사람만이 나와 세상을 변하게 할 수 있는 것이다.


티스토리 툴바