티스토리를 만드는데 생각보다 시간이 많이 걸렸네여. 일단 첫번째 관문인 초대장 얻기부터 시작을 해서 스킨을 고르고 맘에 들게 살짝쿵 변경을 해 주고, 맘에 드는 기능들을 설치하고 ... 끝이 없을 것 같았던 블로깅을 위한 준비도 이제 마무리 단계입니다. 뭐 아직 고쳐야 할 것은 많지만 이대로 가면 영원히 오픈 못 할 것 같단 압박에 서서히 배우면서 바꿀려고 합니다. (초대장 주신 sb돌핀님께 우선 감사를 드려요 ^^;)
일단 웹폰트가 있어야 하겠죠? 웹폰트란 확장자가 eot로 된 파일을 말합니다. 무료 배포 중인 웹폰트 중 확장자를 틀리게 쓰는 것도 간혹 있기는 하지만 대부분 eot라고 보시면 됩니다. (화이트데이는 확장자가 w..로 시작하더군요. 파일명을 바꾸어 본 결과 이상없이 작동하는 것으로 보아 확장자는 크게 상관이 없는 것 같습니다.)
웹폰트가 이쁘기는 하지만 크기가 작고 가독성이 떨어지는 것들이 많습니다. 글씨를 많이 안 쓰시는 분들은 상관없겠지만, 글씨가 많은 포스팅의 경우 보기만 해도 눈이 아파오는 증상이 생길 수 있습니다. 가독성과 모양의 유려함 둘 다 만족시키는 폰트는 많겠지만 쉽게 구할 수 있는 것 중에서 티티체, 나눔고딕을 추천 해 드리겠습니다. 나눔 고딕은 네이버에서 무료 배포하는 폰트로 맑은 고딕의 뒤를 이어 강자로 자리 잡을 것 같습니다. 제 컴퓨터에도 기본 글씨체로 설정이 되어있는데 클리어타입 지원, 가독성 등등 맘에 쏘옥 듭니다. 네이버 횽님이 한 일 중에서 맘에 드는 몇가지 안 되는 일 중에 하나군요.
- 나눔 고딕 다운
- 티티체 공식 홈페이지
- 티티체 웹폰트 다운
티티체의 경우 공식 홈페이지에서 받을시 주소 등록을 해야 하는군요. 물론, 회원가입도 해야 하구요.
개인 홈페이지에서 배포하시는 분을 찾아서 링크 겁니다. 이 파일 같은 경우 제가 확인을 해 보았는데 웹폰트라고 무조건 쓸 수 있는 것이 아닙니다. 제작시 특정 주소에서만 쓸 수 있게 만드는 기능이 있어서 파일을 가져오더라도 쓸 수 없는 경우가 많더군요. 처음엔 것도 모르고 네이버 등등에서 소스보기로 파일을 퍼와서 삽질을 엄청 했네요. 특별히 맘에 드는 폰트가 있다면 만드시는 것도 추천 해 드립니다. 설명대로 하면 그렇게 어렵지는 않은데 웹폰트 개발사인 MS에서도 개발을 포기, 버젼업을 안 하고 있어서 자잘한 오류가 많다고 하네요. 저 같은 경우는 시스템 폰트를 읽어 들이지 못해서 4번을 다시 깔았단 슬픈 전설이 ~ ㅎㅎㅎ.
원하시는 폰트를 정하셨으면 이제 설치를 하러 갑니다.
admin 혹은 관리에 들어가신 후 HTML/CSS 편집을 누릅니다.
파일업로드를 누른 후 준비한 웹폰틑 업로드 합니다.
css 편집을 누른 후 skin.html 이란 창에서 헤드부분에 아래와 같은 소스를 넣어 줍니다.
정리하면
1. 웹폰트를 계정에 업로드한다.
2. 스킨/css편집에서 위쪽창(skin.html) 있는곳에서 <head>와 </head>사이에 다음의 소스를 넣어준다.
일단 웹폰트가 있어야 하겠죠? 웹폰트란 확장자가 eot로 된 파일을 말합니다. 무료 배포 중인 웹폰트 중 확장자를 틀리게 쓰는 것도 간혹 있기는 하지만 대부분 eot라고 보시면 됩니다. (화이트데이는 확장자가 w..로 시작하더군요. 파일명을 바꾸어 본 결과 이상없이 작동하는 것으로 보아 확장자는 크게 상관이 없는 것 같습니다.)
웹폰트가 이쁘기는 하지만 크기가 작고 가독성이 떨어지는 것들이 많습니다. 글씨를 많이 안 쓰시는 분들은 상관없겠지만, 글씨가 많은 포스팅의 경우 보기만 해도 눈이 아파오는 증상이 생길 수 있습니다. 가독성과 모양의 유려함 둘 다 만족시키는 폰트는 많겠지만 쉽게 구할 수 있는 것 중에서 티티체, 나눔고딕을 추천 해 드리겠습니다. 나눔 고딕은 네이버에서 무료 배포하는 폰트로 맑은 고딕의 뒤를 이어 강자로 자리 잡을 것 같습니다. 제 컴퓨터에도 기본 글씨체로 설정이 되어있는데 클리어타입 지원, 가독성 등등 맘에 쏘옥 듭니다. 네이버 횽님이 한 일 중에서 맘에 드는 몇가지 안 되는 일 중에 하나군요.
- 나눔 고딕 다운
- 티티체 공식 홈페이지
- 티티체 웹폰트 다운
티티체의 경우 공식 홈페이지에서 받을시 주소 등록을 해야 하는군요. 물론, 회원가입도 해야 하구요.
개인 홈페이지에서 배포하시는 분을 찾아서 링크 겁니다. 이 파일 같은 경우 제가 확인을 해 보았는데 웹폰트라고 무조건 쓸 수 있는 것이 아닙니다. 제작시 특정 주소에서만 쓸 수 있게 만드는 기능이 있어서 파일을 가져오더라도 쓸 수 없는 경우가 많더군요. 처음엔 것도 모르고 네이버 등등에서 소스보기로 파일을 퍼와서 삽질을 엄청 했네요. 특별히 맘에 드는 폰트가 있다면 만드시는 것도 추천 해 드립니다. 설명대로 하면 그렇게 어렵지는 않은데 웹폰트 개발사인 MS에서도 개발을 포기, 버젼업을 안 하고 있어서 자잘한 오류가 많다고 하네요. 저 같은 경우는 시스템 폰트를 읽어 들이지 못해서 4번을 다시 깔았단 슬픈 전설이 ~ ㅎㅎㅎ.
원하시는 폰트를 정하셨으면 이제 설치를 하러 갑니다.
파일업로드를 누른 후 준비한 웹폰틑 업로드 합니다.
css 편집을 누른 후 skin.html 이란 창에서 헤드부분에 아래와 같은 소스를 넣어 줍니다.
정리하면
1. 웹폰트를 계정에 업로드한다.
2. 스킨/css편집에서 위쪽창(skin.html) 있는곳에서 <head>와 </head>사이에 다음의 소스를 넣어준다.
<style type="text/css">
<!--
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
a:link {font-family: 폰트이름;font-size: 9pt;}
a:visited {font-family: 폰트이름;font-size: 9pt;}
a:hover {font-family: 폰트이름;font-size: 9pt;}
a:acvite {font-family: 폰트이름;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 9pt;}
-->
</style>
<!--
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
a:link {font-family: 폰트이름;font-size: 9pt;}
a:visited {font-family: 폰트이름;font-size: 9pt;}
a:hover {font-family: 폰트이름;font-size: 9pt;}
a:acvite {font-family: 폰트이름;font-size: 9pt;}
body,div,table,tr,td,p,span {font-family: 폰트이름;font-size: 9pt;}
-->
</style>
특별히 지정하신 이름이 없으시면 폰트이름은 원하는 이름을 써 주시면 됩니다. 폰트사이즈는 꼭 선택한 웹폰트의 크기를 적어주셔야 합니다. 그러지 않을시 글씨가 안 보이는 등의 문제가 생길 수 있습니다. 여기까지 한 후 미리보기로 확인을 해 봅니다.
보통 이 정도에서 적용이 된다고 하고, 저 역시 여기까지 하고 적용이 되었네요. 안 되시면 새로고침을 해 보시고 적용 확인 후 skin.htm에서 ctrl+f키를 눌러서 검색창을 연후 article_rep_desc_## 이라고 검색한후 이 부분 앞에 보시면 <div class="article"> 이라고 되어있는 부분 뒤에 style="font:9pt/150% 폰트이름;"을 넣어줍니다. 넣어주고 나면 아래와 같은 모양이 되겠죠?
<div class="article" style="font:10pt/150% 폰트이름;">
그 외 스킨에 따라 적용이 잘 안 되는 부분은 ctrl+F 신공을 이용 css 부분의 font family에 폰트이름에 입력한 이름을 입력만 하면 바뀝니다. 이제 즐거운 포스팅을 하는 일만 남았네요.
Tip. 웹폰트 다중 적용
위 예시를 활용 여러 개의 폰트를 홈페이지에서 사용할 수도 있다?
<style type="text/css">
<!--
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
-->
</style>
<!--
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
@font-face {font-family: 폰트이름; src:url(./images/폰트파일명.확장자);}
-->
</style>
이런 식으로 폰트 지정을 해준 후 폰트 패밀리 부분에 폰트이름만 지정을 해 주시면 한 홈페이지 안에 여러개의 웹폰트 적용도 가능합니다. 원본 파일을 보관 후 실수를 두려워말고 과감히 수정해보세요.
※ 파이어 폭스, 사파리 등에서는 웹폰트가 적용이 안 된다고 합니다. 마소의 전유물인지라... 익스플러에서만 정상적인 작동이 가능합니다.
