star

#Ludens

#social #IT #web #iPad #fashion #psychology #responsive

TTF웹폰트에 대해서

2009.10.05 18:48 in Web/Coding

웹폰트라고 하면 IE의 eot를 생각하시는 분들이 많을 겁니다. 그도 그럴 것이 '웹폰트'라는 건 IE에서만 eot로 계~속 지원되었으니 말이죠. 그런 웹폰트를 현재는 오페라, 파이어폭스, 크롬, 사파리 최신버전에서 사용할 수 있습니다. eot형식이 아닌 TTF형식으로 말입니다.

제가 처음 TTF웹폰트에 대해 알게 된 건 오페라10 알파버전에서 막 지원되었을 때였습니다. 지원이 된다고 했을 때 저는 믿기지 않았지만 예제를 보고 대충 따라 했더니 실제로 되더군요.
그 뒤부터는 계속 블로그에 TTF웹폰트를 적용시켰습니다. 현재는 렉시굴림을 사용하고 있습니다.

TTF웹폰트를 사용하려면 먼저 폰트를 적당히 어딘가에 올린 뒤 CSS에 아래의 내용을 추가시키면 됩니다.

그냥 eot웹폰트 적용하는것과 거의 같다고 보면 되죠. 이름(렉시굴림)과 경로지정(./images/LEXIGULIM.TTF)만 잘하면 됩니다. 이 이후로는 eot적용과 별반 차이가 없으므로 넘어가겠습니다.

TTF웹폰트를 적용시켜서 다른 브라우저에서는 폰트가 나오지만, IE에서는 나오지 않는 문제가 발생해서 어떻게 하면 될까 하다가 아래와 같이 하니 해결이 되더군요.

간단하게 eot를 아래에 붙여주기만 하면 끝이었습니다. 물론 TTF웹폰트와 eot웹폰트의 이름은 달라야겠죠.

이렇게 TTF와 eot를 사용해봤더니 각각 장단점이 있더군요. 아래 표를 보시면 이해가 빠르실 겁니다.

TTF eot
장점 변환이 필요 없다
많은 웹브라우저에서 지원한다.
파일크기가 매우 작다
원하는 주소에만 적용이 가능하다
단점 파일크기가 크다
암호화되지 않는다
번거로운 변환이 필요하다
IE를 제외하면 지원하는 브라우저가 없다.

TTF는 변환 없이 그냥 웹 상에 업로드 하는 것만으로도 사용준비 완료이지만, eot는 MS의 Weft라는 프로그램을 이용해서 변환시켜야 합니다. 그리고 TTF의 최대강점은 eot와 다르게 여러 브라우저에서 지원한다는 점이죠.

하지만 TTF는 파일크기가 너무 큽니다. 영문폰트는 그나마 작은 편이지만 한글폰트는 영어와 한글을 모두 담아야 하기 때문에 벌어지는 현상이죠. 지금 적용한 렉시굴림도 2메가가 약간 넘는 크기입니다.(이것도 그나마 작은 편이죠ㅠㅠ) 파일크기가 크면 그만큼 웹페이지 접속에 시간이 더 걸리기 때문에 상당한 단점이라고 볼 수 있습니다. 반면에 eot는 변환하면서 크기가 매우 작아지기 때문에 속도는 빠르죠.

그리고 TTF는 암호화 되어있지 않습니다. 지금 인터넷임시파일 폴더를 뒤져보시면 아실 겁니다. 따라서 상용폰트로는 사용 불가능합니다. eot는 변환하는 도중에 사용할 사이트주소를 입력해서 그 이외의 사이트에서는 적용되지 않도록 합니다. 그렇기에 싸이월드에서 판매 할 수 있는 것입니다.

사용자 삽입 이미지오페라에서는 안보이는 eot-_-+ IE점유율이 떨어지면 싸이월드의 수익도 떨어질것이 분명합니다(?)

이렇게 TTF와 eot모두 부족한 점이 많습니다. 아직 웹폰트는 갈 길이 멀죠ㅎㅎ TTF웹폰트에 대해 궁금하신 분들이 꽤 계셔서 일단 제가 아는 내용을 적었는데 의문이 풀리셨는지 궁금하네요:)

신고
tagchrome, eot, firefox, Opera, Safari, TTF, Web font, 렉시굴림
받은 트랙백이 없고 , 댓글8개가 달렸습니다.

블로그 웹폰트 적용기

2008.12.13 20:01 in Blog

이곳의 웹폰트는 MS의 EOT가 아니라 확장자가 TTF인 트루타입글꼴입니다.
그리고 윈도우즈에서만 가능합니다.

오페라10 알파버전, 그리고 파이어폭스 3.1버전에서 웹폰트지원 이야기를 들은 저는 블로그에 웹폰트를 적용시키기로 마음먹었습니다.
일단 여러 무료폰트중에서 네이년이 만들어 배포하는 나눔고딕을 쓰는건 제 취향에는 영 아니라서 한겨레신문에서 배포하는 한겨레결체를 쓰기로 결심했습니다.
사용자 삽입 이미지
먼저 직접올리기에서 폰트파일을 올린뒤에
오페라10 알파를 주력으로 사용하는 저는 그쪽에 설명나온대로 아래와같이
사용자 삽입 이미지
스킨->CSS설정에서 간단하게 한줄을 추가시키고요. 테스트를 위해 제 윈도우에서 한겨레결체를 없앤뒤 들어가보았습니다.
이렇게 오페라10 알파에서는 성공적으로 나왔는데...

불여우에서는 안나오더군요. 아마 정식버전부터 지원되나 봅니다.
저는 된다는 소리만 듣고 베타에서도 적용되는줄 알았지요-_-;;

일단 지금은 오페라10알파 말고는 웹폰트가 적용 가능한 브라우져가 아직 없는것 같군요. 이제 파이어폭스도 정식버전이 나오면 웹폰트적용이 될것이니 IE에서 EOT지원이 아니라 TTF를 지원했으면 하는 바램이 있네요.
신고
tagalpha, Beta, css, eot, firefox, Internet Explorer, Opera, Skin, test, truetype, TTF, Web font, Windows, 글꼴, 지원, 한겨레, 한겨레결체
받은 트랙백이 없고 , 댓글8개가 달렸습니다.

티스토리 툴바