티스토리에서 웹폰트 다운로드/적용/알아야 할 점

티스토리 블로그에 대한 것입니다. 네이버 블로그,다음 블로그에서 아래에서 설명하는 것은 할 수 없고 이글루스 블로그의 경우는 모빌리스 웹폰트 서비스를 이용하면 될 것입니다.네이버 블로그나 다음 블로그에서 아래에서 설명하는 하는 것을 하려고 한다면 헛수고이라는 것을 알기 바랍니다. 그리고 개인이 아닌 단체나 회사의 경우는 웹폰트 사용을 아예 마세요. 만약 단체나 회사에서 사용하려면 아래 글을 정독해야 하고 대강 읽은 후 고소당하면 백전백승 개X라고 하지 마세요.

다운로드와 EOT 웹폰트는 익스플로러에서만

익스플로러에서 제대로 보이는 웹폰트는 크롬,사파리,파이어폭스 등 다른 브라우저에서도 그 폰트로 보일 것이라 생각하면 오산입니다. 웹폰트는 EOT와 WOFF가 있는데 EOT 형식의 웹폰트는 익스플로러에서만 보입니다. 저는 나눔고딕 웹폰트를 많이 본 적 있는데 EOT 형식의 나눔고딕아닌 것은 본 적이 없는데 구할 수 있는 모든 나눔고딕은 EOT 웹폰트라 생각하면 됩니다. 다른 형식의 웹폰트가 있다면 댓글에 알려주세요. JQERY 플러그인 jqurey 플러그인

많은 사람이 익스플로러에서만 잘 나눔고딕으로 보이면 다른 브라우저에서도 보인다고 생각합니다.   익스플로러의 점유율이 우리나라에는 높기는 하지만 브라우저는 익스플로러만 있는 것이 아닙니다.

다른 브라우저에서 원하는 폰트로 보이게 하기위해 TTF 파일을 올리는 것은 권하지 않습니다. 그 이유는 나눔고딕 웹폰트,다운로드와 사용하지 않는 이유에서 보세요.

• 나눔고딕,나눔명조 웹폰트 다운로드(단,파일형식은 EOT) : http://ommoon.tistory.com/2
• 적용방법 : http://kazanarun.tistory.com/36

익스플로러만 아닌 다른 브라우저에서도 보이게;

익스플로러외 크롬,사파리,파이어폭스,오페라 등과 같은 브라우저에서 나눔고딕으로 보이게 하고 싶다면 모빌리스 웹폰트 서비스를 이용하는 것입니다. 모빌리스 웹폰트 서비스에 대한 것은 아래 링크를 참고하세요. 명심해야 할 것은 모빌리스 웹폰트 서비스는 개인에게 무료이나 회사나 단체는 무료가 아닙니다.

• 모빌리스 웹폰트 서비스 :  http://api.mobilis.co.kr/webfonts/

렉시새봄 웹폰트 사용, 적용 브라우저 : 이 블로그에서 사용하는 웹폰트에서 설명했듯이 저는 사이드바,덧글 목록,글 목록 등에 렉시새봄 웹폰트를 사용하고 있습니다.

회사나 단체 블로그에서는 어떻게 하면

위에서 모빌리스 웹폰트는 익스플로러만이 아닌 크롬,사파리 등의 브라우저에서도 된다고 했는데 문제는 회사나 단체에서는 무료로 사용할 수 없다는 것입니다. 저의 생각이지만 우리나라에서 익스플로러 점유율이 높으니 나눔고딕 웹폰트를 다운받아 적용하는 것이 어떨까 합니다. 위에서 말했지만 인터넷에서 지금까지 봤던 나눔고딕은 EOT 웹폰트입니다. 모든 브라우저를 생각한다 유료로 모빌리스 웹폰트를 이용하는 것도 좋을 것 같습니다. 참고로 나눔글꼴,저작권에 안전한 폰트 보면 나눔고딕은 개인,회사,단체 등에 사용할 때 저작권등을 따지지 않는다는 것을 알 수 있습니다. 

• EOT 웹폰트 만들기 : http://kazanarun.tistory.com/35
• 나눔고딕,나눔명조 웹폰트 다운로드(단,웹폰트는 EOT) : http://ommoon.tistory.com/2
• EOT 폰트 적용 : http://kazanarun.tistory.com/36

ClearType(클리어타입)이 설정이 안 된 PC에서는

ClearType(클리어타입)이 기본적으로 설정되지 않은 윈도우XP에서는 나눔고딕,나눔명조,렉시새봄 웹폰트 등이 적용된 블로그는별로입니다. 저의 블로그도 별로입니다. 윈도우즈 7,아이패드와 같은 태블릿PC에서는 기본적으로 클리어타입이 설정됐지만 윈도우즈 XP에는 설정해야 하는데 그것은 http://hangeul.naver.com/cleartype.nhn에서 보면 됩니다.

폰트를 선명하게 하는 것이 클리어타입인데 그것을 설정하지 않으면 얼마나 별로인지는 PC방 컴퓨터로 보면 됩니다. 보통 PC 방 컴퓨터는 윈도우즈 XP입니다. 윈도우즈7에서도 클리어타입 설정으로 클리어타입 설정을 제거할 수도 있지만 웬만하면 윈도우즈XP에서 보세요. 이 글을 쓰면서 알았는데 윈도우즈 비스타에서도 클리어타입은 기본적으로 설정된 것이 아니군요.

무조건 되는 것이 아닙니다
티스토리에서는 스킨을 마음대로 할 수 있고 스타일시트간 우선 순위 등이 있어서 무조건 웹폰트가 적용되는 것은 아닙니다. 스킨을 만진 적이 없다면 거의 모든 스킨은 웹폰트에 적용됩니다. 요즘에 스킨을 수정하면서 스타일시트에 우선 순위가 있어서 원하는대로 안될때가 있다는 것을 많이 느낍니다.
스타일시트 적용되는 우선 순위는 태그에 style="" 이라고 쓰는 인라인 다음은 <style></style>이라는 정의, 다음은 <link~>입니다.

저는 해당 블로그도 모르고 자신의 스킨에서는 왜 웹폰트가 적용되지 않느냐는 질문은  자제해주세요.

다른 블로그에서 웹폰트
티스토리 블로그가 아닌 네이버 블로그,다음 블로그,싸이월드 블로그에 대한 것인데 그 블로그에서 지원하는 웹폰트는 클리어타입 웹폰트가 아니라 윈도우즈 XP에서 잘 보입니다. 그런데 익스플로러만 지원하는 웹폰트입니다. 웹폰트 파일형식이 EOT인지는 모르겠으나 EOT 형식의 웹폰트 같습니다.

저의 블로그에 구글 애널리틱스를 설치하여 사용자의 브라우저 정보를 알 수 있는데 방문자중에 71.47%가 익스플로러네요. 10명중 7명 정도가 익스플로러를 사용한다는 말입니다. 우리나라에서는 익스플로러 점유율이 높습니다. 이 정도라면 EOT 웹폰트를 생각해볼 수 있을 것입니다. 웹폰트 유료/무료에 대해 이야기 하면 싸이월드는 도토리로 웹폰트를 사야하고 다음 블로그와 네이버 블로그는 무료라고 알고 있습니다. 싸이월드를 하려면 돈이 많이 든다고 하더라고요. 웹폰트의 양으로 생각하면 다음 블로그에 비해 네이버 블로그에서 제공하는 웹폰트는 정말 많습니다. 그런데 많은 웹폰트를 무료로 제공하므로 어지러운 웹폰트를 사용하는 사람이 많습니다. 그래서 2009년에 네이버 블로그를 할 때 댓글을 읽으면 눈이 아프더라고요.

이 페이지에 사용한 스크립트
이 페이지에 사용한 스크립트는 http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm에서 배웠습니다. 그 페이지는 한글이 아니라 영어라는 것을 알았으면 합니다.

제가 즐겨사용하는 스크립트는 jquery 플러그인과 다이나믹 드라이브의 스크립트입니다. jquery 플로그인은 정말 멋있는데 충돌이 많아 좋은 스크립트는 다이나믹드라이브의 스크립트를 사용합니다. 한글로 설명하는 스크립트의 경우는 브라우저에 대한 설명이 거의 없는데 다이나믹 드라이브의 스크립트는 지원 브라우저에 대해서도 설명해 주더라고요. 예전에 스크립트를 적용했는데 그 스크립트는 익스플로러에서만 지원하는 것이더라고요.

사이드바에 있는 이미지가 슬라이드되는 것도 여기에서 말한 링크에서 배운 것을 활용한 것입니다. 단 거기에 적용된 Fancybox는 아닙니다.

머리아파

이 페이지에 사용한 스크립트를 다른 곳에도 적용했는데 사이드바,이 페이지에 있는 것, 다른 것을 합쳐 3개 있는데 하나는 적용이 안된다. 아이프레임으로 해결해야 하나 다른 방법을 생각해야 하나.... 머리가 아프다.

무료팩스

BY 엔팩스