'WEFT 사용법'에 해당되는 글 1건

  1. 2008.03.03 웹폰트 완전정복! (27)

저는 글자체를 좋아합니다.

타이포그래픽에도 관심이 있고, 글자의 다양성, 표현성을 보면 빠져들 수 밖에 없습니다.

그래서 블로그에도 글자체를 적용하고 싶은데, 티스토리에서는 폰트를 다양하게 지원하지 않는군요ㅜ 그래서 검색해봤습니다. "웹폰트" 라고 검색어를 입력하고 엔터를 치니 많은 사이트들이 나왔습니다.
저는 그중에서 시혼님의 티스토리(태터툴즈) 블로그에 웹폰트 적용하기 글에서 많은 정보를 얻었습니다.

저는 시혼님의 글만 보고 웹폰트 파일이 우연히 있길래 적용하려 했는데 안되는겁니다!
뭔가 했더니 파일이 제한이 있었습니다. 처음 웹폰트를 작성할 때 어떤 사이트에서만 쓰겠다고 설정을 할 수 있습니다. 그 때문에 제 블로그에서는 적용이 안 되었던 것이지요.(아니면 정확한 폰트 이름을 알지 못했을수도)

이런 이유에서 글을 작성하게 되었습니다.

오늘 검색해보니 seevaa체, 우리바탕체등 제작자분께 요청하면 웹폰트를 받을 수 있나봅니다.
그렇게해서 웹폰트를 받으셨다면 위에 링크되어 있는 글을 참조하시면 쉽게 적용할 수 있습니다.

만약에 구하실 수 없다면 제 글을 보시면 됩니다^^
(꼭 제 글이 아니더라도 검색하시면 좋은 글을 찾으실 수 있습니다.)


웹폰트 만들기
필요한 준비물 : 트루타입 폰트, 웹폰트 변환 프로그램(WEFTIII2b1.exe), 빈html파일, 서브셋파일이 필요합니다.

폰트 빼고 모두 다운 받기 왼쪽 클릭

사용자 삽입 이미지
폰트를 구하시는게 문제 인데, 잘 찾아 보시면 구하실 수 있을겁니다.(무책임한;-_-쿨럭)

왼쪽의 그림처럼 윈도우즈 폴더에 폰트 폴더를 보시면 아이콘이 TT나 O로 된것이 폰트 파일입니다.

이런 파일을 어떻게든 구하신다면 반은 성공하신겁니다.

구하셨다면, 먼저 윈도우에 폰트를 설치 하셔야 합니다.
설치는 윈도우즈가 설치된 폴더에서 폰트폴더(보통C:\WINDOWS\Fonts)로 폰트 파일을 이동합니다.
 
사용자 삽입 이미지
그런 다음 이제 웹폰트용으로 변환을 해주셔야 합니다.
변환을 위한 프로그램은 이것입니다.

설치를 합니다.

왼쪽 사진처럼 맨위 데이터베이스 컴포넌트를 첵크하시고 피니쉬를 눌러 줍니다.

그냥 다음 다음 눌러줍니다.



사용자 삽입 이미지
프로그램을 실행합니다.

옆에 파일을 압축을 풀어보시면 파일이 2개 들어있습니다.
하나는 index.html 파일이고, 다른 하나는 서브셋 파일입니다. 곧 사용하게 될테니 준비해주세요^^

(위에서 통합 파일을 받으셨다면 그 안에 있습니다.)




사용자 삽입 이미지

프로그램을 처음 실행하면 왼쪽 사진과 같이 물어보는데,
영어 잘 하시면 해석 해주세요;;

정보를 읽어 온다고 하는데 읽고 나면
이상하게 웹폰트가 생성이 안되니 꼭 아니오 해주세요~

다음으로 이름과 이메일을 물어보는데
그냥 아무거나 입력하셔도 됩니다.


사용자 삽입 이미지
풀다운 메뉴에서 fle:// 을 선택하시고 ...을 클릭하세요.
압축을 풀었던 index.html파일을 불러 옵니다.

다음 다음 눌러 줍니다.

사용자 삽입 이미지

Add... 을 클릭합니다.
현재 윈도우에 설치 되어 있는 글자체가 모두 나옵니다.
여기에서 아까 설치했던 글꼴을 불러 옵니다.

사용자 삽입 이미지

서브셋을 클릭합니다.

사용자 삽입 이미지

로드에서 톱합에 있는 서브셋 텍스트 파일을 오픈합니다.
(텍스트 파일이 보이지 않을 경우 파일 형식을 모든파일로 변경)
왼쪽 상단에 랭귀지 부분은 한글로 바꿉니다.
다 하셨으면 OK 를 클릭!


사용자 삽입 이미지

표시된곳을 체크하고 다음을 누릅니다.


사용자 삽입 이미지

폰트가 생성되면서 스타일 시트 태그가 나옵니다. 여기서 주목할 곳은 표시된곳 입니다.
나중에 폰트를 적용할 때 폰트이름은 꼭 저기에서 나온 이름으로 적용해야 합니다.
그리고 아래는 저장된 위치가 나옵니다.

전체 적용은 맨 처음 밝혔듯이 시혼님의 글을 참조하면 됩니다.

대충 알려드리면 skin.html 파일의 헤드 부분에

<style type="text/css">
@font-face {font-family: 폰트이름; src:url(./images/파일이름.eot);}
</style>

태그를 삽입하시는 것은 기본입니다.
폰트이름에는 위에처럼 생성시 나온 이름으로 꼭 설정하시구요. 파일이름은 업로드한 파일의 이름으로 적용하시면 됩니다. 파일의 이름은 변경해도 되구요. 업로드한 파일과 태그의 파일 이름만 같으면 됩니다.
업로드는 직접올리기에서 올리시면 자동으로 저 경로(/images/)아래로 파일이 업로드 되므로 저 부분은 변경해주시면 됩니다.

부분 적용의 경우 아래처럼 태그를 작성하시고 HTML모드로 입력하시면

<SPAN style="FONT-SIZE: 20px; FONT-FAMILY: 휴먼아미체">저는 글자체를 좋아합니다. <br />타이포그래픽에도 관심이 있고, 글자의 다양성, 표현성을 보면 빠져들 수 밖에 없습니다.<br /></FONT></SPAN>
저는 글자체를 좋아합니다.
타이포그래픽에도 관심이 있고, 글자의 다양성, 표현성을 보면 빠져들 수 밖에 없습니다.
이렇게 나옵니다



간단하게 끝날 줄 알았던 폰트 적용의 글이 한참에 걸려서 완성 되었습니다. ㅠ.ㅠ 불펌은 금지합니다.
제가 설명이 부족해서 내용이 길어진듯 한데요. 궁금하시거나 추가할 사항이 있으시면 댓글로 알려 주시기 바랍니다. 오타도 괜찮습니다^^;

그럼 이만 Bold 였습니다^^

'정보기술 IT' 카테고리의 다른 글

대용량 메일의 진실  (17) 2008.03.16
한글 여백 설정  (0) 2008.03.13
웹폰트 완전정복!  (27) 2008.03.03
광고 위치 및 배경색상  (8) 2008.03.02
화면 캡쳐  (6) 2008.02.13
주민등록초본 발급  (4) 2008.02.11
Posted by Bold

댓글을 달아 주세요

  1. Favicon of http://youngkyoung.net 영경 2008.03.04 14:23 신고  댓글주소  수정/삭제  댓글쓰기

    잘 읽었습니다. 웹폰트를 사용하게 되면 참고해야겠네요. ^^

  2. Favicon of https://sihon.tistory.com 시혼 2008.03.04 16:12 신고  댓글주소  수정/삭제  댓글쓰기

    앗, 그러고보니 제 글에는 웹폰트 적용의 전단계...
    그러니깐 이용을 하려면 사용 가능한 웹사이트 자체를 등록해야함을 적지 않았네요. ^^;
    글을 쓸 때 이미 웹폰트 등록까지 마무리 된 분을 기준으로
    막연히 작성한 것 같아서 헤매시는 분이 있을 수도 있다는 걸 깜빡.. ㅡㅜ
    제 글을 보시는 분들이 Bold님 글도 꼭 함께 읽으셔서 쉽게 웹폰트 문제를 해결하셨으면 좋겠어요.^^

    Good~ 트랙백 감사드려요.^^

    • Favicon of https://bold.kr Bold 2008.03.04 23:34 신고  댓글주소  수정/삭제

      저도 감사해요. 시혼님 글이 없었으면, 그 부분까지 포스팅 해야 했을수도;
      근데 제 폰트는 잘 나오나요?
      집에서 잘 나오길래 괜찮다고 생각했는데, 오늘 피씨방에서 보니 제 블로그 웹폰트만 안 나오더라구요!

  3. Favicon of https://blog.jaea.net 재아 2008.03.04 16:21 신고  댓글주소  수정/삭제  댓글쓰기

    오랫만에 보는, 웹폰트 만들기군요!!.. 예전에 한번 만들어본적은 있습니다...

    ^^:;;

  4. Favicon of https://solarhalfbreed.tistory.com ludensk 2008.03.04 16:26 신고  댓글주소  수정/삭제  댓글쓰기

    음...웹폰트 적용이 어떤걸로 해도 안되서 그 부분을 기대하고 있었는데 말이죠;;;
    시혼님의 글을 읽어보고 다시 해봐야겠군요;;;

    • Favicon of https://bold.kr Bold 2008.03.04 23:37 신고  댓글주소  수정/삭제

      아~ 저도 시혼님 글처럼 쓰려고 했는데요.
      어쩌다 보니;
      웹폰트 파일이 있으신데 적용이 안 되는 것이라면 사용제한 때문 일 수도 있으니 직접 만들어보세요.
      직접 만드셨는데도 안 된다면, 브라우저 차이 때문에 웹폰트가 안 보이는 경우도 있는 듯 합니다.

  5. Favicon of https://ruddo.tistory.com rudo 2008.03.05 09:59 신고  댓글주소  수정/삭제  댓글쓰기

    오오오오, 너무 신기해요!
    한번 해보고는 싶은데, 오늘 하루종일 얘좀 잡고 있어봐야겠어요.ㅋㅋㅋ

  6. Favicon of https://www.kimchi39.com 김치군 2008.04.03 12:25 신고  댓글주소  수정/삭제  댓글쓰기

    와... 굉장히 도움이 되는 내용이네요 ^^..

    다만, 아직도 제가 이해를 제대로 못하고 있는게...(-_- );;;

    다시 잘 읽어봐야겠어요 ㅠㅠ..

  7. Favicon of http://skizy.tistory.com skizy 2008.06.26 06:14  댓글주소  수정/삭제  댓글쓰기

    호오... 많은 도움이 되었습니다.

  8. Favicon of http://bananakiller.com 쇼센 2008.09.19 06:16  댓글주소  수정/삭제  댓글쓰기

    많은 도움이 되었습니다. 덕분에요~ 복받을 꺼에유~

  9. Favicon of http://applejadore.tistory.com/ 사과벌뢰 2008.10.14 02:53  댓글주소  수정/삭제  댓글쓰기

    전 인덱스 파일 불러오기가 안돼요 도와주세요

    • Favicon of https://bold.kr Bold 2008.10.16 00:31 신고  댓글주소  수정/삭제

      인덱스 파일이 안 불러지신다면 폰트파일이 제대로 안 읽어저서 그런것 같습니다. 위에 그림처럼 녹색 체크가 되어야 하는데요. 아마 폰트 이니셜라이즈 할 때 폰트를 잘 못 읽은 듯 하네요.
      다른 폰트로 한번 시도 해보시길 바랍니다.

    • Favicon of http://applejadore.tistory.com/ 사과벌뢰 2008.10.16 00:39  댓글주소  수정/삭제

      풀다운 메뉴에서 fle:// 을 선택하시고 ...을 클릭하세요.
      압축을 풀었던 index.html파일을 불러 옵니다.

      폰트 부분 가보지두 못하구 이 부분에서 인덱스가 안불러져욤

    • Favicon of https://bold.kr Bold 2008.10.16 00:56 신고  댓글주소  수정/삭제

      자세하게 설명해주시겠어요?
      그냥 불러오기가 안 되신다면 첨부된 파일이 아닌 다른 인덱스 파일을 선택 하신게 아닌가 추측되는데요.

    • Favicon of http://applejadore.tistory.com/ 사과벌뢰 2008.10.16 01:08  댓글주소  수정/삭제

      사진 설명처럼 압출 다 풀고 풀다운 메뉴에서 fle:// 을 선택하시고 ...을 클릭하세요.
      압축을 풀었던 index.html파일을 불러 옵니다.

      이 부분에서 같이 들어있던 인덱스를 불러오느데도 안되더라구욤

    • Favicon of https://bold.kr Bold 2008.10.16 01:12 신고  댓글주소  수정/삭제

      혹시 바탕화면에 압축을 푸셨나요?
      인덱스 파일 경로에 한글이 있으면 읽지 못 하는 듯합니다.

    • Favicon of http://applejadore.tistory.com/ 사과벌뢰 2008.10.16 01:24  댓글주소  수정/삭제

      에 바탕화면에 풀었어욤

      그럼 어떻게 해야돼죠??

    • Favicon of https://bold.kr Bold 2008.10.17 00:46 신고  댓글주소  수정/삭제

      바탕화면 말구요 C:\ 에 폴더를 하나 만드셔서 풀어서 불러 오시면 됩니다.
      C드라이브나 D드라이브 편하신 곳으로 하세요.
      바탕화면은 한글이 들어가는 경로라서 인식을 못 합니다.

    • Favicon of http://applejadore.tistory.com/ 사과벌뢰 2008.10.17 02:03  댓글주소  수정/삭제

      아 c 드라이브에다가 했는데도 안되네요 ㅠㅠ

  10. Favicon of https://melburn119.tistory.com MarShall™ 2012.01.26 10:41 신고  댓글주소  수정/삭제  댓글쓰기

    이거 은근히 쉽지않은 작업이네요 ㅠ_ㅠ;;
    그럼에도 불구하고 끝내 성공했어요 ㅎㅎ 전 다음_Regular로 성공했답니다.ㅎㅎ
    감사합니다. 다른 글꼴로도 연구를 해봐야겠네요 ㅎ