2010/02/24 06:28 팁/블로그
티스토리 블로그에 원하는 글씨체를 적용시키고자 한다면 웹폰트로 변환해서 사용해야합니다.
대부분의 글씨체는 윈도우용으로 TTF파일로 되어 있는데요.
이걸 웹폰트로 변환해서 적용시키는 방법을 알려드리도록 하겠습니다.
일단 사용하고자 하는 글씨체의 TTF파일과 프로그램, 그에 필요한 문서 파일이 있어야 합니다.
나눔고딕은 자유배포가 가능하기 때문에 직접 업로드 했으며, Microsoft WEFT도 아마 프리웨어
일거라 생각하기에 직접 올렸습니다.
예제는 나눔고딕이지만 다른 TTF파일의 글씨체로도 가능하니 보시고 익히신후에 응용해서
활용하시기 바랍니다.
다운로드 3가지
1. 나눔고딕
NanumFontSetup_Win_TTF.exe출처는 http://hangeul.naver.com/share.nhn 입니다.
2. Microsoft WEFT
3. 웹폰트 변환에 필요한 HTML문서와 TXT문서 (편의를 위해 다운하세요.)
font.alz나눔고딕은 다운받아서 설치하시고, Microsoft WEFT도 설치만 해놓습니다.
3번 문서는 다운받아서 바탕화면에 압축해제해서 font 폴더 상태로 놓아둡니다.
미리 설치해 놓은 Microsoft WEFT를 실행 합니다.
Microsoft WEFT를 실행하면 나오는 첫번째 창에서 반드시 아니요(N)을 선택합니다.
다음으로 넘어갑니다.
자신의 임의로 적은뒤 다음으로 넘어갑니다.
좌측에서 file://을 선택한뒤 파일 찾기를 클릭합니다.
바탕화면 선택후 압축을 풀어둔 font 폴더를 오픈합니다.
font.html 문서를 오픈합니다.
Do not add linked pages.를 체크하고 다음으로 넘어갑니다.
Skip analysis를 체크한뒤 다음으로 넘어갑니다.
Add..를 선택합니다.
추가시킬 글씨체를 선택합니다.
Microsoft WEFT를 처음 실행시켰을때 예(Y)를 눌렀거나, 글씨체를 윈도우에 설치하지 않았을 경우에
추가창에서 안보일 수 있습니다.
나눔고딕을 선택하고 OK
추가된 나눔고딕을 선택한뒤 Subset으로 들어갑니다.
Language에서 Hangul을 선택후 Load로 들어갑니다.
우측 하단의 All files을 선택후 subset.txt를 선택해서 오픈합니다.
OK를 눌러서 다음으로 넘어갑니다.
본래 노란색 물음표 부분이 초록색 체크표시로 바껴야 정상적인데, 64비트 윈도우7이라 그런지
바뀌지 않았지만 정상적으로 진행 됩니다.
스샷을 보시고 자신은 초록색 체크표시로 바뀌었다고해도 정상인것이니 진행하시기 바랍니다.
아래 체크표시를 다 선택하고 다음으로 넘어갑니다.
그냥 자신의 블로그 주소를 적어줍니다. 중요하진 않은거 같습니다. OK누르고 진행합니다.
밑줄 친 부분에 자신이 추가한 글씨폰트가 맞는지 확인하고 그뒤에 창을 전부 닫고 종료 시킵니다.
바탕화면 font 폴더를 확인해보면 자신이 변경한 eot 파일을 확인 할 수 있습니다.
관리자 매뉴에서 스킨 > 파일 업로드를 선택해서 바탕화면에 있는 font 폴더 안의 DBFNT0.eot 파일을 업로드 합니다.
HTML/CSS 편집으로 가서 style.css 최상단의 @charset "utf-8"; 아래에
@font-face{font-family:나눔고딕;src:url(images/DBFNT0.eot)} 를 추가 합니다.
다른 웹폰트를 적용시킬 분은 빨간 부분만 자신이 변경하고자 하는 웹폰트의 이름과 eot 파일명으로 바꾸면 됩니다.
아래처럼 적어넣고 적용 시키면 웹폰트로 변환과 적용은 끝입니다.
되도록 쉽게 설명하기 위해 최대한 많은 스크린샷을 이용했습니다.
이 글을 보고 도움이 되신분은 따뜻한 코맨트 부탁드립니다.
추천까지 해주시면 감사하고요. ^^
'팁 > 블로그' 카테고리의 다른 글
| 글씨체 나눔고딕을 웹폰트로 변환하고 적용시키는 방법 (4) | 2010/02/24 |
|---|
댓글을 달아 주세요
정말 좋은 정보네요. 궁금했던 걸 속 시원히 알아갑니다. 양질의 정보입에도, 아직 방문자가 적은 게 아쉽네요. 곧 대박이 터질거라 확신합니다. ^^
댓글 감사합니다. 도움되셨다니 다행이네요. 즐거운 주말 되세요. ^^
글씨체 바꾸고싶었는데... 감사해요 :)
윈7 사용하는데, 전혀 적용이 안되네요 ㅠㅠ
혹시 뭐가 문제인지 알 수 있을까요 .....휴 ㅠ