잡다한 이야기들... :: 테터툴즈 기본 에디터 글꼴에 웹폰트 추가법...

블로깅을 하다보면 테터툴즈에 가끔 웹폰트를 적용하고 싶다는 생각이 들때가 있다...
스킨의 CSS 파일을 편집하여 웹폰트를 설정해서 쓰면 되긴 되지만... 이놈의 에디터에서 적용하려면 매번 Html모드에서 <font face ="어쩌구저쩌구를 항상 추가해줘야한다. 필자는 항상 이런식으로 노가다로 포스팅할때 웹폰트를 적용시켰었다.
그래서 혹시 누군가 웹폰트를 에디터에서 쉽게 넣을수있는 플러그인으로 배포하지않을까 노심초사 기다리고 기다렸다.
하지만 역시 아무도 그런 좋은 플러그인을 올려주시는 용자분이 없기에 목마른자가 우물을 파듯 본 필자가 머리를 싸매고 연구하고 연구한결과.. 도저히 플러그인으로 만드는 법을 모르겠더라... (뭔말을 하고싶은게냐...)
서론이 너무 길었다. 하지만 계속 우물을 파다보니 플러그인으로는 내 수준에서 불가능함을 깨달았고 블로그의 PHP파일을 약간 수정하여 편하게 웹폰트를 적용하는법을 찾아냈으니... 본 필자와같이 목이 마른이들은 이 강좌로 그 목마름을 해소하길 바란다...

※주의사항※php 수정작업을 하다가 자칫 실수로 블로그가 다시는 돌아올수없는 강(?)을 건널수도 있으니 각별히 주의하길 바라며 수정전에 수정할 파일백업이나 DB백업을 강력하게 추천한다. 혹시 잘못되었다고 필자의 블로그에 자살폭탄 테러하는일이 없기를 바란다.

일단 PHP파일을 수정하기위해선 FTP프로그램과 EDIT프로그램이 있어야한다.
간편히 구할수있는 FTP프로그램으로는 알FTP라는 국민 FTP프로그램이 있으며..
EDIT프로그램으로는 상용제품인 'UltraEdit' 나 '비주얼 스튜디오'등이 있다. 윈도우즈 기본 메모장으로도 가능할지도 모르겠다만... 추천하지는 않는다...
어쨋든 PHP파일을 에디트 하는 프로그램은 알아서 구해보자... 은근히 쉽게 구해지고 어둠의 루트 하나정도는 있을것이라 믿는다!

일단 웹폰트를 적용하기 위해서는 웹폰트가 자신에게 있어야 하겠다. (당연한거 아닌가!?)
웹폰트를 다운을 받거나...이때는 무료배포해주는 사이트를 검색해보면 나오니 알아서 찾아보자...
정 웹폰트가 없다면 자신이 직접 만드는 방법도 있다.
웹폰트를 만드는 강좌는 전에 포스팅하다가 짜증이 나서 때려치웠었다... -_-a
그래서 부득이하게 다른분이 만든 강좌를 링크해주겠다..
http://kcookie7.ivyro.net/ 이곳은 쿠키홈이라는곳으로 회원가입을하고 게시판등에 글을 쓰면 포인트가 모이고 포인트가 모여서 회원등급이 올라가면 이쁜 웹폰트들을 받을수가 있다... 홈페이지를 무슨 피라미드 회사 광고하는듯 하지만... 필자는 이 홈페이지의 주인장과는 아무런 관련이 없음을 밝힌다..
어쨋든 클릭 몇번이 귀찮은 이들을 위하여 이분의 홈페이지중에 강좌가있는 곳의 링크도 달아주겠다. http://cookieplus.ivyro.net/wfonts/wfon ··· make.htm

어찌어찌 자신의 웹폰트를 만들었다면 FTP프로그램을 이용하여 웹폰트를 자신의 계정에 올린다. 어떤 폴더든 상관은 없다만 개인적인 생각으로는 fonts 폴더를 생성하여 그안에 때려넣어주는게 편한듯 하다.
웹폰트를 계정에 업로드 하였으면 블로그에 적용이 되도록 스킨의 style.css를 수정해주자.

@font-face {font-family: ttche; src:url(http://www.guyang2.com/fonts/1.eot);}

그림에서 밑줄친 부분과 같이 위같은 코드를 추가해준다. 자신의 환경에 맞게 수정하자...필자의 블로그를 예를 든것이므로 이것을 그대로 쓰면 안된다.
여기서 fnot-family:ttche;는 앞으로 우리가 쓰게될 폰트의 이름을 설정해주는것이다.
필자는 ttche라고 이름을 지어주었다.뭐 자신의 입맛대로 설정해 주어도 되지만...

가능하면 위의 스샷과 같이 원래 윈도우에서 표시되는 글자체 이름을 적어주는게 좋다. 그이유는 나중에 따로 설명해 주겠다.

그리고 url뒷부분에 주소에는 자신의 계정에 해당 웹폰트가 있는위치를 적어주면 되겠다.
한개 이상의 웹폰트를 사용할때는 아래부분에 저것과 같은 코드를 계속 적어주면 되겠다.
여기까지 해놓으면 앞으로 블로그의 HTML모드에서 <font face="ttche">라고만 적어주면 웹폰트가 본문에 적용이 된다.
하지만 우리가 원하는것은 이게 아니다...
테터툴즈의 기본에디터에 저따위 노가다가 아닌.. 간단히 클릭 몇번으로 글자체를 적용시킬수 있게 하는것이 이번강좌의 목표이자 핵심인것이다!!!

일단 기본적으로 웹폰트와 프로그램이 갖추어지면 FTP프로그램을 이용하여 블로그에서 수정할 파일을 받아보자.

친절히 그림을 첨부하겠다...ㅎㅎ
루트 디렉토리에서부터 blog/owner/entry/edit/item.php 파일과

blog/owner/entry/post/index.php
파일을 다운받자.
다운을 받았으면 에디터를 이용하여 수정을 해보자...

일단 item.php파일을 보게 되면 2779번째 라인에서...(필자와 버전이 다른 테터툴즈라면 라인수가 다를지도 모른다..) 못찾겠다면 '글자체'라고 검색하자 그러면 그 근처에 있다.

<option style="font-family: 'Andale Mono';" value="'andale mono',times">Andale Mono</option>

이라는 코드가 보일것이다
이것을 수정을 이제 할텐데.. 필자는 티티체를 기준으로 수정을 하겠다.

여기서 style="font-family: 'ttche';" 는 아무의미가 없는듯 하다.아마도 글자체 고르는곳에 표시되는 폰트를 설정해주는듯 싶다...그래도 혹시 모르니 바꿔주자... 필자의 경우는... 아무렇게나 해도 잘됬었다...
value="ttche" 이부분이 중요한 부분으로 위에서 웹폰트 이름 지어놓은것을 써줘야 한다.

※참고사항※이제 필자가 왜 위에서 폰트 이름을 윈도우에서 표시되는 이름으로 지으라고 하였는지 설명해주겠다.
웹폰트는 일단 자신의 컴퓨터에 해당 폰트가 설치되지 않더라도 브라우저를 통해 글을 볼때 그 폰트로 보여지게 해준다... 라는것은 알것이다...
하지만 필자가 php파일을 수정하고 에디터에서 사용되는 CSS파일에 아무리 웹폰트를 추가해도 에디터에서는 글을 쓰는 도중에도 웹폰트가 보여지게할순 없었다. 필자가 능력이 떨어져서 그런것일지도 모른다 해결책을 아는분은 트랙백이나 덧글 환영한다.
물론 글을쓸때 해당 폰트가 보이지는 않지만 저장하고 나가서 글을 보게되면 웹폰트가 적용되어있는 이쁜 글들을 보게 된다. 요약하자면
자신의 컴퓨터에 웹폰트와 동일한 폰트가 깔려있고(웹폰트를 윈도우 fonts폴더에 넣으란 소리가 아니다..;;)
스킨의 style.css에서 웹폰트 이름을 지을때 윈도우에서 표시되는 폰트이름과 같다면 자신의 에디터창에서 해당 폰트모양대로 보여지게 된다.
반대로 둘중에 하나라도 해당하지 않는다면... 글을쓸때 이쁜 폰트모양을 볼수는 없지만 저장하고 완성된 글을 본다면 이쁜글씨체가 나온다...
중요한건 하라는대로 해서 해당 폰트를 보면서 글을 쓰는게 좋다..라는것이다!! 말주변이 없어서 설명이 조금 이상하지만...이했다고 믿는다..;; (무책임...)

추가 설명 : 위의 팁대로 폰트이름을 지어서 에디터 상에서 글씨체를 지정하게되면 html모드에서 <font face="ttche">라고 적히게 되며... 이것은 자신의 윈도우즈의 fonts폴더의 ttche와 매치가 되면서 해당 폰트가 보이는것이라 생각된다.

그리고 '티티체 (9pt)' 라고 적은것은 글자체를 고를때 표시하는 내용이다.
뒤에 (9pt)라고 적은것은 웹폰트의 기본 크기를 알수있게끔 일부러 적은것이다.
안적어도 상관이 없지만..웹폰트는 글자크기를 정확히 주는게 보기에 깔끔하고 어떤 웹폰트는 (EX:티티체) 폰트 크기가 다르면 글자가 표시되지 않을수도 있다.
테터 에디트의 기본 폰트크기는 9pt이니 티티체의 경우 글을 쓸때 따로 글자크기를 설정해주지 않아도 된다..
하지만 웹폰트가 10pt전용이라면 글을쓸때 글자크기를 10pt라고 정확히 속성을 설정해주어야 하는데 모든 글자체의 글자 크기를 외우고 있지 않는한...
저렇게 10pt나 9pt로 명확히 해놓으면 나중에 글자크기 속성을 정해줄때 편할것이다.

이제 index.php파일을 수정할텐데... 이 파일의 수정부분은 위에서 설명한 item.php파일의 수정부분과 같다.
아까 했던것처럼 '글자체'로 검색을 하여서 저부분을 찾은후 역시 같은 방법으로 수정해주면 되겠다.
자 이제 수정했으니 php파일들을 다시 업로드를 하여야 한다.
정확히 자기 위치에 업로드 한후 테터툴즈의 에디터를 들어가보면 글자체가 변경이 되어있는것을 보게 될것이다.

적용된 웹폰트를 보자...ㅋㅋㅋ
이제 웹폰트를 편하게 플러그인으로 만드는 용자가 나올때까지 이런방법으로 웹폰트를 써주자...ㅋㅋㅋ

참고사항에서 말한것과 같이 폰트를 저런 짓거리를 안하고도 표시가 되는 방법이 있다면.. 적극적으로 트랙백이나 덧글을 부탁한다...

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.

아르핀 2007/07/30 09:55
재미있는 글이네요. 이글루스 블로그를 쓰는지라 이 팁을 언제쯤 써볼 수 있을지는 잘 모르겠지만... ^^ 제로보드 XE가 나오면 한번 시도해봐야겠네요.
태터는 본지 오래된지라 정확히 잘 모르겠지만 에디터에서 글쓰는 도중에도 웹폰트가 적용된 모습을 보려면 에디터 출력 모양을 지정하는 파일을 찾아서 수정해야할 것도 같네요. (그게 정확히 어떤 것인지는 잘 모르겠습니다만 아니면 웹폰트는 실시간으로 다운로드가 안되는 걸까요. ^^;
좋은 팁 잘보고 갑니다~ 고맙습니다.
- Guyang2 2007/07/30 10:20
  저기 위에 말한대로 자기 컴퓨터에 해당 폰트가 깔려있고 폰트 이름이 해당 폰트의 이름으로 저확하게 지정해놓으면... 글씨를 쓸때 웹폰트가 적용된 모습으로 글씨가 써집니다... 에디트 창에 필요한 거의 모든 css파일을 뒤적거리고 웹폰트 넣어봐도 안되더군요...
  심지어 html모드에서는 웹폰트로 보이지만... edit모드에서는 안보이더군요... 저보다 더 잘하시는분들이 좀더 연구해주시면 좋겠다는생각만 드는군요..
  밤에 졸면서 글을 작성하다보니 글에 문맥상 안맞는글이 수두룩 하군요...ㅠㅠ
소년 2007/08/18 11:36
<head><style type="text/css">

</style></head>

이라고 만들어놓긴 했는데요 style.css의 어디에 넣어야죠?
이걸 하는 목적이 에디터에서 선택되게끔하는건가요?
- Guyang2 2007/08/20 22:40
  어떻게 설명을 드려야 할지 잘모르겠지만...
  일단 소년님께서 위에 쓰신 코드중에서
  
  @font-face {font-family:MG; src:url(http://worldofidea.com/fonts/MG.eot);}
  
  이부분만 필요합니다.
  그리고 참고로 말씀드리자면 '' 이것으로 둘러쌓인부분은 html에서 주석(comment)처리됩니다. 따라서 올바른 문법이라도 주석처리된부분은 적용되지 않습니다.
  이것은 필히 삭제 해주시길 바라며
  바로 아랫줄의
  
  body,table,tr,td,p {font-family: 맑은고딕;font-size: 9pt;}
  
  이부분은 body와 table과 문단테그 안쪽에서 윗줄에 정의한 글꼴을 글자크기 9로 적용시키라는것을 의미합니다.
  
  그리고 위에 정의 할때 MG라고 웹폰트의 이름을 지어주셨다면 font-family:맑은고딕 이렇게 쓰는게 아니라 font-family:MG라고 쓰셔야 한답니다.
  
  위에 강좌의 방법이 너무 복잡하다면 간단히 본문에 웹폰트를 적용하는법도 있습니다.
  방법은 style.css의 최상단에
  
  @font-face {font-family:MG; src:url(http://worldofidea.com/fonts/MG.eot);}
  
  위 코드만 넣어주시고 본문에 글을 쓰실때 html에디터로 가셔서 직접 테그를 <font face=MG> 이런식으로 넣어주시면 적용이 됩니다.
  
  위에 많은 작업을 하는 목적이 저 움직이는 이미지에서 보는것과 같이 에디터에서 글을쓸때 글꼴을 선택할수 있도록 하려고 하는거지요.
  
  그냥 style.css에 문구만 추가한다면 직접 태그를 일일히 써줘야하하는데 그 불편함을 덜어주고자 저짓을 하는겁니다.
  
  설명이 부실해서 죄송합니다.
  
  근데 맑은 고딕이 웹폰트로 변환이 되던가요??
  저는 맑은고딕이 웹폰트로 만들어지지 않던데요;;
소년 2007/08/22 00:33
아... 그런가요?
일단 만들어는 놨는데.
@font-face {font-family:MG; src:url(http://worldofidea.com/fonts/MG.eot);}

이거죠?

시도해볼께요~

아 그런데 드래그가 안되네요..ㅎ(ㅜㅜ)
소년 2007/08/22 00:45
아 성공했네요..ㅎ 맑은고딕도 되네요.
http://worldofidea.com/77
aquana 2007/11/16 16:54
Guyang2 님 덕분에 텍스트큐브의 위지윅 에디터도 적용해서 편하게 사용하게 되었습니다. 감사해요. 트랙백 걸고 갑니다. ^^;
- Guyang2 2007/11/19 12:09
  트랙백 잘보았습니다..
  텍스트 큐브는 또 다르군요...
  저는 얼마전에 텍스트 큐브로 갈아타고...
  신경도 안쓰고 있었습니다...T^T
텍스트 2007/12/05 11:12
텍스트큐브 보니깐 위 내용과 완전 다 다르던데 어떻해 수정해야될까요????????
테스트큐브에는 해당 글자체 이런게 검색도않되니거와 관련 글자가 없더라구요
저도 웹폰트 적용하고싶은데 어떻해 해야될까요?
- Guyang2 2007/12/06 03:50
  덧글 맨위에 트랙백 있는곳에
  dive to aquana`s ear
  텍스트큐브에서 웹폰트 적용하기
  
  라는 트랙백으로 들어가보세요
  그럼 텍스트 큐브에 적용하는 방법이 있어요..