이번에는 실무에서 경험했던 것을 토대로 한 웹폰트 사용방법을 알려드리고자 합니다.


홈페이지 주소는 보안상 가렸습니다. 아직 실제로 서비스되는 홈페이지가 아니거든요...



원래 이 사이트 테마의 기본 폰트는 OpenSans 였으나, 고객의 요청에 의해 폰트를 변경하게 되었습니다.



그래서 font-family를 지정해주는 게 기본입니다.


하지만 font-family라는 속성 만으로는 해당 폰트가 깔려 있지 않은 컴퓨터에서는 폰트가 제대로 보여지지 않게 됩니다.


이 것을 보완하여, 모든 컴퓨터에서 공통으로 같은 폰트가 나오게 하고 싶기 때문에 웹폰트를 쓰는 것이지요.



웹폰트를 연결하기 위한 폰트 코딩은 사실 어렵다기 보단, 좀 짜증나게 짜잘한 부분에서 코딩이 긴 측면이 있습니다. 빌어먹을 인터넷 익스플로러 호환성 때문인데, 그래서 따로 import 하는 것이 가장 좋은 방법입니다.


익스플로러 구버전 같은 브라우저에서는 css import가 안된다지만, 어차피 그런 브라우저에서는 웹폰트 자체가 안먹히니까요.



웹폰트를 위해 import 시킨 css는 다음과 같이 만들어져 있습니다.


다른 브라우저에서는 ttf만으로 동작하지만, 인터넷 익스플로러에서 웹폰트를 제대로 보이게 하기 위해서는 eot, woff를 연결시켜야 합니다.


폰트가 하나의 파일로 되어 있는 게 아니라, 폰트 굵기나 이탤릭체 등이 있어서 폰트가 몇개가 있는 경우 그에 비례해서 코딩의 양도 늘어납니다.


그래서 짜증나는 것이지요.


@font-face {

  font-family: 'HelveticaNeveSTD';

  font-style: normal;

  font-weight: 100;

  src: url(HelveticaNeueLTStd-UltLt.eot);

  src: url(HelveticaNeueLTStd-UltLt.eot?#iefix) format('embedded-opentype'),

       url(HelveticaNeueLTStd-UltLt.woff) format('woff'),

       url(HelveticaNeueLTStd-UltLt.ttf) format('truetype');

}


대략 이런 구조로 되어 있습니다.


이 구조에서 폰트 경로를 바꾸고 font-weight 속성을 바꿔서 코딩을 추가하면 다른 굵기의 폰트 파일을 연결시킬 수 있는 것이죠.




구글 폰트의 좋은 점은 이런 브라우저상의 차이에 의한 호환성 문제를 자동으로 구글에서 해결해준다는 것입니다.


그래서 짜증나는 코딩을 생략할 수 있어서, 시간을 아낄 수 있고


게다가 구글은 세계적으로 많이들 사용하기 때문에, 안정적인 서비스가 가능합니다.


그러니까 고객이 원하고 구글에 없는 폰트라면 이런 방법을 써야 겠지만, 웬만하면 구글에 있는 폰트는 구글에서 끌어다 쓰시는 게... 정신건강상 이롭습니다.



댓글을 달아 주세요

  1. 작은설탕-Mini 2016.08.03 09:29 신고  댓글주소  수정/삭제  댓글쓰기

    저도 구글이에서 제주고딕체 사용하고있어요 ^^

티스토리 툴바