PHOTOLOG, by RYO

태어나서 처음으로 이런 사용기? 비슷한 걸 올려보려니..
막상 어느 말부터 시작해야될지, 무엇부터 해야될지 아리까지 하기도 하고..

내가 했던 순서대로 그냥 끄적거려본다. 궁금하면, 댓글 남겨주세염..

1. 웹폰트와 시스템폰트의 차이!
홈페이지를 만들때, 자신의 컴터에는 있는 폰터를 기준으로 만들면,
상대방 브라우저에 해당 폰트가 없는 경우 전혀 생뚱맞은 굴림체 같은 것이 나가게 된다.

하지만 웹폰트는, 웹상에서 공통의 폰트를 갖고 있으면서
그것을 브라우저에서 호출후에 표시해주기 때문에, 일정한 폰트 느낌을 유지할 수 있게 된다.
(단, Opera, Safari 등 익스플러 외의 브라우저에서는 소용없다 ㅜㅜ)

일반 폰트는, ttf와 같은 확장자명을 갖는다. (TrueType Font File 정도 되겠찌..)
웹 폰트는, 확장자가 eot를 갖게 되며, 특정 서버에 반드시 업로드 되어서 호출되어야 한다.
(웹폰트가 저장된 경로가 죽어버리면 결국 폰트 안뜬다.. ㅋㅋ)

2. 웹폰트 만들기 / 구하기..
웹폰트는 직접 자신이 가진 TTF 화일을 가지고 만들 수 있다.
(저작권 문제는 되게 애매한것 같다. 내 컴터에 있는 폰트, 내 홈페이지에 썼을 때..
즉 G마켓에서 폰트를 구매해서 디자인에 사용한 것과, 텍스트에 사용한 것의 차이가
저작권의 침해라고 말하기는 힘들 것 같다)
WEFT 라는 Microsoft에서 나온 프로그램을 통해서 만들 수 있다. (만드는 방법은 별도 블로그 참조)

나같은 경우는, 웹폰트 만들려고 하는데 정작 나한테 예쁜 폰트 없어서 구하러 돌아다녔다.
구하기 좋은 사이트로는, 소야홈, 웹폰트 등이 있다.

지금 쓰고 있는 폰트도 그곳에서 구한 것이다. eot 화일만 구하면 우선 웹폰트는 준비완료!

3. 폰트 업로드
티스토리에서는 스킨 편집화면에서, 화일을 업로드 할 수 있다. (관리자메뉴 > 스킨 > 스킨편집)

티스토리에서 제공하는 착실한 파일 업로드 기능을 통하여, eot 화일을 업로드해준다.
그렇게 되면 eot 화일이 내 티스토리 스킨 폴더 내에 업로드 완료 된 것이다. 이제 스킨에
적용만 해주면 된다. ^^

4. 스킨에 적용하기!!!
참고로 이 글을 읽는 ghosthigh(티스토리 개발자/전직 G마켓 개발자)는 분명히 내가 한 것을 두고
HTML 표준에 맞지 않는다느니, css를 제대로 이해 못했다느니 이런 소리를 할게 뻔하지만
내가 아는 한도 내에서 쓰는 내 블로그 포스트이니 그딴 댓글 남기면 너 영원히 총각으로 늙어죽게
기도해버릴게야! ㅋㅋ

Anyway..
지금 제가 쓰는 스킨을 기준으로 할때,
style.css 편집하는 화면에서 제일 상단에 아래와 같이 내용 추가해주면 됩니다.

즉 webfont를 정의해주는데, 그것은 소스(src)는 url에 되어 있고 그 url은
./images/TTche.eot 라고 되어 있다.. 그리고 그 폰트를 지배받을 layer 들은,
g_textarea, textarea, pre, input, div 등에 적용된다.. 이렇게 적어주면 됩니다.

아마 기존 style.css에는 "굴림" 이나 "돋움" 이런 글씨가 들어 있을긴데
그 자리에 저것으로 대체해주면 됩니다. eot폰트별로 만들어질때
특정 사이즈만 만들기 때문에(용량문제로) 저는 12px 폰트만 사용하도록 했구요..
저거 14나 10으로 늘리거나 줄이면 사이트 깨짐..

저렇게만 해주면 제 블로그처럼 웹폰트 사용가능합니다.

eot 폰트 구하기나, 웹폰트 만들기 어려울때는 다시 댓글 남겨주세요.. ㅋㅋ

이상 Ryo의 허접 티스토리에 웹폰트 적용하기 였슴다.. ^^

De RYO

인터넷 IT/PC eot, style, webfont, 웹폰트