Update 2012. 3 - 사실 좀 오래된 뉴스인데, 2011년 10월 Adobe가 Typekit을 인수했다.

예전에도 한 번 웹폰트에 대해서 쓴 적이 있는데 그 후로 참 이쪽 업계에 많은 발전이 있었다. 주요 웹브라우저가 웹폰트 지원을 강화했고, iOS4.2부터 모바일 사파리가 웹폰트를 지원한다. Typekit도 빠르게 성장하는 것 같고, 구글도 웹폰트 서비스를 오픈한 후 신경을 많이 쓰는 것 같다. 구글에서 제공하는 폰트 패밀리가 지금 197개에 달하고, 빠르게 추가되고 있다. 국내에서도 미투데이가 한동안 나눔고딕을 웹폰트로 제공했는데 성능을 이유로 제거했다. 한국어 폰트는 글자수가 많아 용량이 큰데, 적극 도입하는데 큰 장벽이 되는 것이 사실이다. 하지만 웹폰트는 앞으로 대세 내지는 상당히 일반적으로 쓰일 것으로 생각한다. 내가 개발하고 있는 서비스에서도 웹폰트를 쓰고 있는데, 관련 자료를 정리하기 위해 이 글을 쓴다. 약간의 구글링만으로 찾을 수 있는 자료들이지만... 나이를 먹어감에 따라 자꾸 헷갈려서 원.

쉬운 방법부터. 구글이나 타입킷같은 웹폰트 호스팅을 이용하면 정말 쉽다. Google WebfontsTypekit에서 마음에 드는 폰트를 고르고 코드 몇 줄 복사해 넣으면 바로 적용된다. 구글은 Open/Free 폰트만 제공하지만 쓸만한 것들이 많다. 타입킷은 무료부터 유명 상용 폰트까지 다양하다. 비슷한 서비스가 많으니 고려해보자. 한글 폰트가 필요하다면 fontface.kr(무료, 비상업, 나눔 패밀리만 제공)이 우선 시도해보기 좋고, 더 본격적으로 상업적 지원까지 고려한다면 모빌리스의 웹폰트 서비스(나눔, 은, 백묵 등 공개글꼴 제공)에 관심을 가져보자.

좀 더 기술적인 것들을 알고 싶다면 계속 읽어주세요. 일반인은 여기까지.

@font-face로 웹폰트를 쓸 때 성가신 점은, 바로 브라우저 호환성이다. IE은 EOT, Firefox는 WOFF(3.5 이하는 TTF/OTF), Safari는 TTF 포멧을 지원한다(IE9와 OS X Lion의 사파리는 WOFF 지원한다고. 5년 후엔 WOFF로 대동단결 가능하겠다.). 즉 한 가지 웹폰트를 사용하려면 세 가지 포멧을 서버에 올려두어야 한다. Google Web fonts나 Typekit같은 서비스는 이걸 알아서 해주니 편하다. 

브라우저 호환성을 고려해 CSS 작성하는 방법은 Bulletproof @font-face syntax 참고. 그리고 웹폰트를 임베딩 할 때 CSS파일에 직접 써줘도 되지만 Google Font API의 WebFont Loader 라이브러리(JavaScript)를 고려해보자. 폰트를 비동기적으로 불러올 수도 있고, 유용한 이벤트도 제공한다. 꼭 구글 웹폰트에 등록된 폰트가 아니라도 사용할 수 있다.

영문 폰트는 유/무료로 선택의 폭이 넓다. 한글의 경우 자유롭게 사용할 수 있는 폰트가 많지 않은 실정이다. GPL 혹은 OFL을 채택한 폰트는 모빌리스 웹폰트 서비스에서 제공하는 것들의 거의 다라고 생각하면 되겠다. 무료로 공개된 한글 폰트가 꽤 있지만 웹폰트 형태로 자유롭게 쓸 수 있는 것은 거의 없다. 예를 들어 포탈 다음도 네이버와 마찬가지로 '다음체'라는 글꼴을 무료 공개했지만 '나눔글꼴'처럼 수정과 재배포가 자유로운 OFL을 채택하지도 않아 웹폰트로 활용은 어렵다. 공식 페이지의 사용가이드란에 (그것도 이미지로) "배포되는 형태 그대로 사용해야 합니다"라는 조항이 있더라. (정말 안되는지 궁금하면 다음에 문의해보세요.) 한겨레라던가 조선일보, 엠비씨 등 언론기관에서도 글꼴을 공개했지만 개인 용도에 한한다던가 하는 단서가 있으니 역시 웹폰트로 사용하는 것은 어렵겠다.

나의 경우는 서울시에서 배포하는 서울 남산/한강체를 웹폰트로 활용하기 위해 이 글에 적고 있는 내용들을 조사한건데, 서울체의 경우 서울시에 전화로 문의해서 웹페이지에 사용해도 좋다는 답을 얻었다. 담당자가 기술적인 사항을 제대로 이해했는지는 확실하지 않지만, 공공기관에서 만들었고 되도록 널리 사용되기를 바라는 것 같았다.

아래는 폰트파일을 웹폰트 포멧으로 바꾸는 방법이다. 그런데, 바꾸기 전에 꼭 기억하자 - 폰트도 소프트웨어로서 저작권을 보호받는다. 웹에 올릴 수 있는 권리가 있는지 꼭 확인하자. 당신의 컴퓨터에 깔린 폰트라고 해서 웹에 올려도 되는건 아니다. 돈주고 샀을지라도 말이다.

TTF를 EOT/WOFF로 변환해주는 웹서비스가 있다. 폰트를 업로드하면 필요한 모든 작업을 해줘서 너무너무 편하다. 단 두 곳 모두 2Mb 업로드 용량 제한이 있어 아쉽다.

한글 폰트의 용량이라는 것은 예사로 2Mb를 넘기 때문에 직접 변환해야 하는데 TTF to EOT는 http://www.eotfast.com/가 괜찮은 것 같다. http://code.google.com/p/ttf2eot/도 같은 일을 해주는 프로그램인데 나의 경우는 잘 작동하지 않았다. MS에서 윈도우 95시절에 만들었다던가 하는 WEFT라는 툴이 있는데, 나는 제대로 써보질 못했다.

WOFF로 바꿀 땐  http://people.mozilla.org/~jkew/woff/를 쓰면 된다. OTF나 TTF를 변환해준다는데, 내 경우 OTF는 변환이 안되고 TTF만 되더라.

변환한 폰트 파일들은 위의 @font-face 설명이나 Google Web Font Loader 등을 이용해서 웹사이트에 넣으면 되겠다. 

참고로 나도 아직 잘 모르는 부분들이긴 하지만 몇 가지를 더 소개하자면... EOT는 특정 도메인에서만 사용할 수 있도록 만들 수 있다. 이걸로 수익모델을 만든 회사도 좀 있더라. 그리고 구글 웹폰트는 필요한 글자의 폰트만 다운로드하는 옵션이 있어 전송량을 줄이도록 도와준다. 한글 폰트야말로 이런 기법을 적용하면 큰 효과를 볼 수 있을테다.

웹폰트에 대해 더 알고싶다면 위키피디아의 Web Typography 항목이 좋은 시작점이 될거고, Typekit Blog에서도 좋은 글을 많이 올라와있으니 체키라웃.

p.s : 또 다른 font-face ;)

저작자 표시
신고
  1. Commented by BlogIcon yuna at 2011.07.15 13:18 신고

    부지런하고 꼼꼼하고 친절하셔라! :-D

  2. Commented by BlogIcon CANTATA at 2011.07.29 08:46 신고

    좋은 정보 잘 보고갑니다.
    적용시켰습니다.

  3. Commented by BlogIcon lucy at 2011.12.23 16:35 신고

    유용한 정보 감사합니다 :)

  4. Commented by 열셋 at 2012.01.27 16:58 신고

    내용중 http://people.mozilla.org/~jkew/woff/ 의 링크가 ttf2eot 로 걸려있네요 ^^;
    잘못눌렀나 하고 몇번이나 다시 눌러봤습니다...

  5. Commented by 궁금이 at 2012.01.30 00:49 신고

    글을 읽고 서울 한강체와 남산체를 받아서 변환후 폰트페이스로 사용해봤는데
    한강체의 경우 라이트와 미디움 사이즈 서체가 파이어 폭스와 크롬에서 안보이고 남산체의 경우 라이트 미디움 볼드 셋이 파이어 폭스와 크롬에선 안보였습니다.
    아무래도 WOFF 포맷에 문제가 있는 것 같은데 웹폰트 적용시 어떠하셨는지 결과가 궁금합니다. 답글 부탁드려요. 감사합니다

    • Commented by BlogIcon sh. at 2012.02.01 12:28 신고

      저도 변환해본지 좀 오래되서 정확하게 기억이 안 납니다만, 웹페이지에서 쓰려고 했던거라 미디엄만 변환을 했던 것 같습니다. 제가 변환해둔 폰트를 한번 사용해보세요. http://dl.dropbox.com/u/1989606/seoulnamsanwebfonts.zip

  6. Commented by BlogIcon sh. at 2012.04.26 23:54 신고

    http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ 각 운영체제/브라우저별 웹폰트 렌더링에 관해 자세히 기술한 글.

  7. Commented by 초코 at 2014.06.16 04:24 신고

    안녕하세요

    구글 웹폰트를

    1. 자바스크립트 비동기 식으로 하면 더 좋을까요

    아니면 그냥 링크로 하는것이 좋을까요?

    2. 그리고 페이지 로딩을 보는사람이 마우스로 화면을 내려가면 그때 계속해서
    로딩되게끔 할수 있을까요?.. 그러면 페이지 로딩시간이 단축될것 같아서요..

    답변 부탁드립니다.

    • Commented by BlogIcon sh. at 2014.07.04 13:57 신고

      안녕하세요. 댓글 알림이 안 와서 이제야 봤네요. 각각 장단점이 있을텐데요, 저는 스크립트로 로딩합니다. 화면에 깜빡거리는 단점이 있긴 하지만 스타일시트로 부르면 아무래도 화면 로딩이 느려질 것 같아서요. 특정 이벤트(말씀하신 화면 스크롤 포함) 발생했을 때 로딩하는 것도 가능할 것 같아요. 그런데 사이트 로딩 속도가 걱정되는 거라면 자바스크립트(https://github.com/typekit/webfontloader)를 쓰시면 어차피 비동기 로딩을 하니까 따로 신경을 안 쓰셔도 될 것 같아요.



티스토리 툴바