[웹 폰트] safari, crome, firefox등에서 외부 폰트 구현하기

IE에서는 웹 폰트(EOT)방식으로 화면에 표현되지만,
IE외의 웹 브라우저에선 True Type Font로 표현됩니다.

IE외의 웹 브라우저 화면에서 폰트를 나타내고 싶으신 분들은
다음의 소스를 참고하시길 바랍니다.

우선, 폰트를 서버에 업로드시키세요.
새로 CSS파일을 만들어 연결시키거나 기존 CSS파일에 아래의 내용을 추가해주세요.
 

/* True Type Font 정의하기 */

@font-face
{font-family:우리폰트명; src:url(상대경로 또는 절대경로/우리폰트명.ttf) format('truetype')}

※ format을 truetype으로 설정하는 것이 중요합니다.


출처: http://www.woorigle.com/wooriboard/board.php?id=fnq&articleNo=16&page=1&searchText=

---

TTF(true type font)와 EOT(embbed open type)폰트란?

TTF (true type font) 란?
트루타입글꼴이라고 하며 폰트의 외곽선을 직선과 곡선으로 표현하므로 글자 크기에 상관없이 사용가능하고 파일이 사용자의 시스템에 위치해야 사용이 가능합니다.
제어판-글꼴 폴더에 파일이 존재해야 합니다.
주로 문서작성이나 이미지 편집에 사용됩니다.

EOT (embbed open type) 란?
웹에서만 사용가능한 폰트로 방문자의 컴퓨터에 폰트가 존재하지 않아도 웹에서 폰트가 구현되는 방식입니다. 파일은 사이트 서버에 위치해야하며 url이 eot파일에 등록이 되어있어야 사용이 가능합니다.
즉, EOT는 개별 제작을 받아야 합니다.

출처: http://www.woorigle.com/wooriboard/board.php?id=fnq&articleNo=11&page=1&searchText=

---

WOFF ( Web Open Font Format )

http://en.wikipedia.org/wiki/Web_Open_Font_Format#Specification
http://www.w3.org/Submission/2010/SUBM-WOFF-20100408/

예제)

@font-face {

font-family:Hawaii Killer;

src: url("./fonts/hawaii_killer.woff") format("woff");

}
 .hawaii {

font-family: Hawaii Killer;

font-size: 22pt;

font-weight:normal;

font-style:normal;

}

<style>
<p class="hawaii">Hawaii Killerrt font~~!!</a> 

---

웹폰트  변환툴(eot & woff)
1. TTF to EOT 툴 : 홈페이지 : EOTFast - Convert TTF to EOT, Fast
2. TTF to WOFF : 홈페이지 : sfnt2woff



참고 사이트
블로그에 유용한 태그 6 - 티스토리 블로그에 웹폰트 적용하기 (2)    <--  웹폰트(eot, ttf, woff, svg형식에 대한 설명)

[그림 1] iPad와 iPhone에서 공식적으로 별도 폰트 이용하기 위한 embedded fonts를 지원하지 않고 있음.

[그림 2]Font Embed방법과 XML규약에서 다르고 잇는 사용 언어에 대한 선언(xml:lang="ko")방법

[그림 3] Embed할 수 있는 폰트 타입(ttf:True Type Font, otf:Open Type Font)중 표준인 otf폰트을 권장

[ 그림 4] 이미지 크기 조정의 기준은 가로(↔)크기를 기준으로 비율적으로 표시한다. 

EOT

임베디드 오픈타입(Embedded OpenType, EOT) 글꼴은 마이크로소프트가 웹 페이지에 임베디드 글꼴로 사용할 목적으로 설계한 오픈타입 글꼴의 축소형이다.

확장자는 ".eot"이다.

 

WOFF

웹 오픈 폰트 포맷(Web Open Font Format, WOFF)[1] 웹 페이지에서 사용할 수 있는 글꼴 포맷이다. 이것은 2009년에 개발되었으며 W3C 웹 폰트 작업 그룹에 의해 권장하는 웹 글꼴 형식으로 표준화가 진행 중이다.

http://www.w3.org/Submission/WOFF/
이 문서는 WOFF 폰트 형식을 지정합니다. 이 형식은 @ 글꼴 얼굴 CSS 선언과 함께 사용하기에 적합한 폰트 데이터의 경량 구현하기 쉬운 압축을 제공하도록 설계되었다. TrueType/OpenType/Open Font Format의 파일이 손실없이 웹 (폰트 데이터의 허가를 받아야합니다)에 WOFF로 변환 할 수 있으며, 한 번 사용자 에이전트에 의해 디코딩, WOFF 폰트는 된 원래 바탕 화면 글꼴로 동일하게 표시됩니다 만들었습니다.

  

TTF (트루타입)

트루타입(TrueType)은 외곽선 글꼴 표준으로, 1980년대 말에 애플 컴퓨터가 어도비의 포스트스크립트에 쓰이는 타입 1 글꼴에 대항하기 위해 개발하였다. 트루타입의 주된 이점은 글꼴 개발자들에게 글꼴이 다양한 글꼴 크기에서 어떻게 표시될 것인지에 대한 높은 수준의 제어를 할 수 있다는 것이며 이를 힌팅기술 혹은 힌팅 인스트럭션이라고 한다.

EUDC의 이용을 위해 이 글꼴 표준을 사용하는 파일 확장자로는 .ttf, .tte가 있다.

 

OTF (epub에서 권장 폰트)

오픈타입(OpenType)은 컴퓨터 글꼴을 위한 크기를 조절할 수 있는 포맷을 말한다. 처음에는 마이크로소프트사가 개발하다가 나중에는 어도비 시스템즈사와 결합하였다..

오픈타입 글꼴의 파일 확장자는 .otf이며 트루타입 글꼴의 확장자 .ttf를 사용하기도 하며 OTTO의 타입 코드를 갖는다.