웹폰트 완벽 사용법? (woff, eot)

웹폰트라 함은 굳이 포토샵을 이용해서 이미지로 홈페이지에 박아넣지 않아도 오직 텍스트로만 홈페이지를 구성할수 있게 하는 방법중 하나이다. 최근의 경우 반응형 웹, CSS3등의 발전으로 이미지의 비중은 홈페이지에서 계속해서 줄어드는 추세이다.

 

현재 새로 개발되고 있는 홈페이지들의 경우 이미지는 보통 로고, 아이콘, 배너, 일부 배경에만 사용되고 있으며 나머지 모든 페이지의 95%정도가 CSS3 및 웹폰트로 해결되고 있는 실정이다. 웹폰트는 보통 겉보기에는 이미지로 이루어진 글씨로 보이지만 드래그가 가능한 점이 있고, cufon과의 차이점은 cufon은 텍스트가 로딩된후 이를 파싱하는 방식에 드래그가 안된다는 차이점이 있다.

 

물론 페이지 로딩 성능에 따라서는 웹폰트 > cufon 이 되겠다. 웹폰트는 html,body{font-family:Web Fonts} 전체로 적용을 해도 렉이 생기지 않지만, cufon은 본문 컨텐츠 부분에 사용하게 되면 페이지 로딩에 큰 저하를 불러올수 있어 보통 소제목이나 대제목으로 사용하는 실정이다. 예전 홈페이지들의 경우 이 대제목 소제목의 경우 이미지로 일일히 저장하여 사용해왔었지만, 최근 추세로는 모두 cufon 또는 웹폰트를 채택하고 있는 실정이다.

 

그렇다면 웹폰트를 사용하려면 어떻게 해야할까. 오늘은 cufon이 아닌 웹폰트 사용법을 알아보기로 한다. cufon은 내 블로그에서 이전에 이미 올려둔 자료가 있으니 사용하려면 그 부분을 찾아보셔도 괜찮을것 같다.

 

웹폰트는 2가지 방식이 있다. 현재 IE9이상/Firefox/Chrome/Safari 등 최신 브라우져들은 .woff 웹폰트를 사용한다. 하지만 빌어먹을 이전 IE 브라우져들은 woff 를 인식하지 못한다. 고로 구글 웹폰트를 고대로 적용하게 된다면 IE8이하 브라우져에서는 처참히 깨지는 당신의 홈페이지를 볼 수 있을것이다. 물론 차후 1-3년내로 윈XP가 모두 사라지고 윈7 또는 윈8, 윈8.1 이 대다수 OS가 된다면 이 문제도 자연스레 해결되겠지만, 아직까지도 XP와 IE6-8 사용자가 존재한다는게 문제다.

 

그렇다면 ie 저버젼과 최신 브라우저들에서 내 홈페이지에 웹폰트가 잘 출력될 수 있게 하려면 어떻게 해야할까. 우선 구글에서는 css 상단에 import 하는 방법으로 제공을 하고 있다.

 

Google Web Fonts (https://www.google.com/fonts)

 

이 곳에 들어가서 보게되면 각 폰트가 리스팅되어 있으며 각 글씨체마다 See all styles 로 미리보기 기능을 제공하는것도 있지만 보통은 Quick-use 버튼뿐이다. 이 것을 클릭해보자. 구글 웹폰트를 사용하는 방법은 총 3가지다. css 로 직접 불러오거나, 이미 사용중인 레이아웃 .css 파일에 @import 시켜주는방법, 그리고 JavaScript 를 사용하여 넣어주는 방법이다. 하지만 필자가 추천하는 방법은 .css파일에 @import 해주는 것이 가장 좋은 방법이다. 왜냐면 보통 웹폰트를 전 페이지에 적용하는 경우는 드물고 일부 섹터에만 적용하는게 대부분이기 때문에, layout.css 상단에 import를 시켜놓은뒤 원하는 class나 id에 font-family:를 사용하여 적용시켜주는게 가장 좋기 때문이다.

 

만약 Vampiro One라는 글씨체를 사용하고 싶다면 CSS상단에 아래 코드를 삽입하고

@import url(http://fonts.googleapis.com/css?family=Vampiro+One);

 

title 클래스에만 적용을 시키고 싶다면

.title{

font-family: 'Vampiro One', cursive;

} 

 

이런식으로 적용을 해 볼수가 있다. 여기까지는 매우 쉽고 간편한 방법이다. 하지만, 위에서 말했듯이 이 구글웹폰트는 IE8이하 버젼에서 출력되지 않는 경우가 발생한다. 이 경우에는 해당 글씨체의 eot 파일을 구해야하는데, 보통은 구글검색으로 구할수 있다. 인터넷 세상이 매우 넓으므로.. 정말 흔치 않은 최신 글씨체의 경우 간혹 파일이 없을수도 있다. 또한 import 된 주소를 직접 인터넷창에 치고 들어가게 되면 세부 소스를 볼수 있는데, .woff 파일의 주소가 적혀있다. 이 파일을 다운받고, eot파일 역시 다운 받자.

 

그리고 위에서 상단에 @import 시킨 구문을 삭제하고 아래처럼 새로 작성한다.

@font-face{
 font-family:Vampiro;
 src:url(Vampiro.woff) format(‘woff’);
 src:url(Vampiro.eot);
}

 

 

font-maily 의 이름을 Vampiro 로 정의하여 추가해주는 부분이다. 여기서 woff와 eot를 중복 정의해줌으로써 IE8이하 버젼에서 웹폰트가 죽어버리는 현상을 미연에 방지할수 있게 된다. 또한 이렇게 소스를 수정하게 될 경우

 

.title{

font-family: 'Vampiro One', Vampiro;

}

 

이렇게 소스를 수정해서 사용해볼수 있겠다.

 

끝.