'웹폰트'에 해당되는 글 2건

  1. 2013.07.20 초간단! 블로그에 내가 원하는 웹폰트 적용하기 (1)
  2. 2012.05.30 익스플로러9 에서 웹폰트 적용이 안되는 경우 (모든 브라우저 호환 웹폰트)

초간단! 블로그에 내가 원하는 웹폰트 적용하기

 

정당한 노동의 댓가 컨텐츠를 정당하게 비용을 지불하고 사용하는 것과 또 글로벌한 회사에서  그 컨텐츠를 무료로 제공할때 그 사이에 빠지는 딜레마는 어쩌면 자주 겪는 일일지 모릅니다. 현재 안군닷컴에 적용중이기도 한 웹폰트 서비스 는 원래 모빌리스의 웹폰트 서비스를 사용중이었습니다. 일전에 블로그에 소개후 이 서비스를 이용중인 분들이 얼마나 되실지 모르겠지만 모빌리스 웹폰트가 기본 호스팅을 유료로 전환을  했고 소규모 비영리 개인 사용자에 대해서는 무료로 제공을 하는데 제약이 두가지 있습니다.

 

월 5,000다운로드 한정이라는 점. 안군닷컴 블로그의 경우에는 이 보다 더 많은 트래픽을 차지 하게 되기 때문에 중간에 계속해서 굴림 폰트로 변경되는 문제가 있어 왔습니다. 두번째는 무료상품은 월마다 한번씩 사용을 갱신하기 위해서는 단순히 갱신 버튼을 클릭하는
것이 아니라 제품을 무료로 재구매를 해야 되는데 이 절차가 생각만치 그리 간단하지가 않습니다.


작은 차이일 수 있지만 정확히 날짜를 체크하지 않고 기일을 넘기는 일도 부지기수이고 매월 스스로 갱신하는 일이 생각보다 불편하다라는걸 사용해본이들은 알게 됩니다. 어지간해서는 그냥 쓰려고 했는데 구글에서는 동일한 웹폰트를 제공하지만 이런 제약이 없으니 절차는 물론 과정이 무지하게 간단해 져버립니다.

 

어디 사이트에 사용할것인지 절차에 대해서 기입하지 않고 원하는 코드만 따와서 블로그 CSS에 코드 삽입해주면 바로 OK 라는거죠. 유료 구매하지 않는 입장이라 모빌리스 측에서 저같은 무료 고객은 와도 그만 오지 않아도 그만일지 모르겠지만 서비스 제공하는 입장에서 이런 편의성의 차이 (크지 않은게) 결국은 성패와는 직결되지 않나 하는 생각이 드는 대목이었습니다.

 

어쨌든 추후 관리할 필요가 없어지고 편의성때문에 현재 구글 웹폰트를 안군닷컴에서는 적용중입니다.
블로그에 웹폰트를 사용하실 분들은 구글 웹폰트를 무료로 한번 사용해 보세요.

 

 

구글 웹폰트 서비스 페이지에 접속을 하고 Ctrl+F 키를 눌러서 원하는 폰트를 찾아서 코드만 삽입을 하면 됩니다. '나눔고딕'의 경우에는 'Nanum' 이라고 검색하면 아래와 같은 코드가 검색됩니다. 그리고 아래처럼 적용하면 됩니다.

 

 

 

 

1건 1건
  1. 하드코더 2013.08.23 17:46 신고 address edit & del reply

    블로그 같은 사이트는 구글 웹폰트가 좋져. 한글폰트가 부족한 것이 아쉬운 부분인데 우리나라에도 괜찮은 서비스가 생겨나고 있습니다. 타이포링크(www.typolink.co.kr)를 무료로 사용중인데 괜찮습니다. 물론 모빌리스처럼 무료는 제한이 있습니다.

익스플로러9 에서 웹폰트 적용이 안되는 경우 (모든 브라우저 호환 웹폰트)

 

 

 

블로그나 사이트를 장식할때 중요한것중 하나가 폰트이기도 합니다. 보편적으로 블로그들은 다양한 폰트를 사용하기에는 한계성이 있죠. 일반적으로 FONT 태그를 활용하여 꾸미는 경우에는 그 사이트를 접속하는 접속자 PC에 해당 폰트가 설치되어 있지 않는다면 기본폰트로 동작하게 됩니다. 하지만 웹폰트를 사용하게 되면 접속자 PC에 해당 폰트가 설치되어 있지 않더라도 동일하게 지정되어 있는 폰트로 화면 출력이 가능합니다.

 

웹폰트를 사용하는데 있어서는 몇가지 애로사항이 있기도 했습니다. 보편적인 폰트파일 ttf (TrueType) otf (OpenType) 을 불러오는 방식이 있는데 오페라, 사파리, 크롬, 파이어폭스 같은 브라우저에는 문제가 없지만 많은 이들이 사용하는 인터넷 익스플로러(IE)의 경우에는 웹폰트로 표시가 되지 않습니다. 따라서 내가 만든 사이트에 접속자들이 폰트가 없이도 웹폰트로 출력이 되게 하려면 이 ttf 파일을 eot(Embedded Opentype)으로 변경을 해서 파일을 온라인에 올려두고 불러오는 방식을 사용하기도 했습니다. 그런데 이 방법또한 인터넷 익스플로러 8 버전 이하에서는 문제가 없었지만 9 버전이상에서는 웹폰트로 적용이 되지 않는 호환 문제가 있었습니다. (윈도우7을 사용하는 분들이라면 대부분이 IE9를 기본으로 사용하게 됩니다) 그러면 IE9에서 지원하기 위해서는 woff (Web Open Font Format) 로 변환을 시켜서 지정을 하여 출력하는 방법이 있었습니다.

 

그런데 이런 여러가지 과정은 번거롭죠. 사용자가 폰트를 변환하여 지정하고 관련 태그를 넣어도 (사실 HTML을 다룰줄 아는 분들이라면 아주 쉽지만) 제대로 적용이 안되거나 호환성 때문에 신경써야 할것들이 많고 초보자에게 쉬운일은 아닙니다. 그럼 더 간단하게 하는 방법은 없는가? 있습니다! 이런 웹폰트 적용을 하는데 애로사항을 줄여주기 위해서 이미 공용으로 웹폰트를 사용할 수 있도록 서비스 해주는 사이트들이 제법 있죠. 그럼 유료아닌가요? 아닙니다. 무료입니다. 개인이 굳이 파일을 변환해서 eot 파일이나 woff 파일을 블로그에 올리지 않아도 되며 대부분의 웹브라우저를 전부 지원합니다. (익스플로러 버전 상관없이, 파이어폭스, 크롬, 사파리, 오페라, 에어등등)대표적으로 추천하자면 모빌리스 웹폰트 서비스 사이트가 바로 그것입니다.

 

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

 

위 사이트로 이동을 하면 간단한 설명과 함께 적용할 수 있는 방법이 설명되어 있습니다.

 

 

웹폰트 사용방법에 대해서는 하단에 자세히 설명이 되어 있습니다. 기본적으로 HTML 문서 안에 <head> </head> 코드를 복사해서 넣어줍니다.  티스토리를 기준으로 예를 들면 style.css 부분 가장 상단에 @import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb); 이라고 추가를 하고 웹브라우저의 찾기 기능을 이용해(Ctrl+F) 'dotum' 이라고 지정되어 있는 폰트 부분을 찾아서 전부 해당폰트명 (위 예제에서는 나눔고딕웹폰트를 지정했기 때문에 'NanumGothicWeb' 으로)으로 전부 수정하면 됩니다.

 

현재 AHNGUN.com 역시 이 웹폰트 서비스를 적용 블로그의 폰트가 출력되고 있는 상태입니다.

 

 

없음 작성
prev 1 next