익스플로러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 ··· 20 21 22 23 24 25 26 27 28 ··· 138 next