웹폰트(Downloadable Font), 크로스 브라우징 - EOT, WOFF, TTF by mOng

CSS3의 @font-face는, 사실 이전(CSS2)에도 존재해 온 규칙입니다. 다만, 우리가 흔히 웹폰트라 부르는 Embedded Open Type(.eot)포맷의 라이센스로 인해, -해당 포맷을 지원하는 유일한 웹브라우저인-인터넷 익스플로러에서만 사용되어 왔습니다. 그러나, 사파리 3.1의 릴리즈와 함께, -라이센스의 문제를 해결한-일반적인 TruType(.ttf)글꼴 및 OpenType(.otf)글꼴을 웹페이지에 웹폰트처럼 사용할 수 있게 되었습니다. 이렇게, 여타의 웹브라우저가 웹폰트 형식의 Downloadable Font를 다른 포맷으로 지원하기 시작하고, Web Open Font Format(.woff) 지원이 일반화 되자, @font-face가 다시 주목을 받고 있습니다.

샘플 페이지 : http://einmong.hosting.paran.com/nanumfont/

특정 웹브라우저에 종속되지 않게 웹폰트(Downloadable Font)를 사용하기 위해서는, @font-face 규칙에 맞게, 글꼴의 이름을 지정(선언)해 주어야 합니다. (기존의 웹폰트 사용법과 다르지 않습니다)
@font-face{
  font-family: 'NanumGothicWeb';
  src: url('NanumGothic.ttf');
}
스타일시트에 위와 같이 선언해 주고, 아래와 같이 font-family속성을 이용해 해당 폰트를 불러다 쓰면 됩니다.
(물론, IE는 아직 TruType(.ttf)을 지원하지 않기 때문에, 위 방식만으로는 IE에 적용되지 않습니다)
body{ font-family: 'NanumGothicWeb', sans-serif; }
이러한 방식으로, 크로스 브라우징이 가능한 대표적인 시스템으로, 'Google Font API'가 있습니다. 그러나, 한글 글꼴을 제공하고 있지 않아, 아래와 같이 영문 장식체의 활용이나 숫자표현 등의 사용으로 한정지을 수 밖에 없습니다.
Beautiful English Font
이번 포스팅은 'Google Font API'와 유사한 방법으로, 트루타입 폰트(TTF)와 @font-face를 활용한 기법 (Daum font로 Google Font API 따라잡기)에서 시작했습니다.

한글 TruType(.ttf)글꼴을 Downloadable Font로 활용하기에는, 저작권 문제를 제외하더도 한 가지 큰 부담이 있습니다. 바로 용량 문제입니다. 수정/재배포/무료 사용이 가능한 '나눔고딕'글꼴을 살펴보더래도, 한자가 포함되지 않은 2.0버전은 2.23MiB이며, 한자가 포함된 3.0버전은 4.13MiB나 됩니다.
Font API가 제공된다면 이러한 문제가 손쉽게 해결 되겠지만, 현재로는 한글 TruType(.ttf)글꼴의 용량 문제와 IE의 미지원 등을 생각해 (.eot)포맷 및 (.woff)을 함께 사용하는 방법이 최선이며 또 일반적인 방법이 되리라 생각합니다. 일 예로, 2.23MiB의 '나눔고딕'글꼴을 (.eot)포맷으로 변환하면 846KB, (.woff)포맷으로 변환하면 981KB정도가 됩니다.
* 웹폰트 변환 툴 (eot & woff) 참고

이 최선의 방법은 Paul Irish의 문서 @font-face gotchas를 기초로 합니다. '나눔고딕'을 사용하였으며, 유려한 볼드체를 위해 '나눔고딕 볼드'글꼴도 함께 준비했습니다.
먼저 필요한 파일(.ttf, .eot, .woff)을 제작/준비하여 적당한 곳에 업로드 한 후, 스타일시트 파일을 만듭니다.

NanumGothic.css
@charset "utf-8";
@font-face{
  font-family: 'NanumGothicWeb';
  font-style: normal;
  font-weight: normal;
  src: url('NanumGothic.eot');
  src: local('☺'), url('NanumGothic.woff') format('woff'), url('NanumGothic.ttf') format('truetype');
}

@font-face{
  font-family: 'NanumGothicWeb';
  font-style: normal;
  font-weight: bold;
  src: url('NanumGothicBold.eot');     
  src: local('☺'), url('NanumGothicBold.woff') format('woff'), url('NanumGothicBold.ttf') format('truetype');
}
먼저, 웹페이지에서 해당 글꼴을 사용하기 위해, font-family속성을 이용해 이름을 지정해 줍니다(글꼴 자체의 한글 이름 또는 영문 이름(NanumGothic)은 사용하지 않는 것을 권장합니다)
글꼴의 다운로드 경로를 지정하는 src:url('')은 각각의 글꼴이 위치한 상대경로 또는 (http://...)와 같은 전체 경로로 지정주1)해 주면 됩니다. 한 가지 유의할 점은 src: local('☺')입니다.

예를 들어, src:local('NanumGothic')의 경우를 살펴보면 다음과 같습니다. 클라이언트 시스템에 '나눔고딕'이 설치되어 있다면, 웹용 폰트를 다운로드 할 필요없이 설치된 로컬 글꼴을 사용하게 됩니다. 즉, 웹페이지의 font-family: 'NanumGothicWeb'속성이 지정된 부분에, 실제 사용되는 글꼴은 로컬에 설치된 'NanumGothic'이 되는 것 입니다. 그런데, '매킨토시 시스템의 글꼴 이름에, 2바이트 유니코드 문자셋이 적용되지 않는 문제로, 글꼴 이름으로 사용될 것 같지 않은 특수문자로 대체'하고 있다 합니다.

끝으로, 볼드체의 경우 같은 font-family로 지정하고, 'font-weight: bold'로 구분주2)해 주었습니다.

이렇게 만든 스타일시트를, 실제 웹페이지에서 다음과 같이 이용하면 됩니다.
<style type="text/css">
@import url(NanumGothic.css);
html, body{
  font-family: 나눔고딕, 'NanumGothic', 'NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', 돋움, 굴림, Dotum, Gulim, sans-serif;
}
</style>
웹에서 다운로드하여 글꼴을 사용하는 경우만 생각한다면, font-family: 'NanumGothicWeb', sans-serif; 로 설정해 주어도 됩니다. 그러나, 클라이언트 시스템에 나눔고딕이 설치되어 있는 경우를 가정해, 로컬글꼴에 우선 순위를 두었습니다.

아래는, '나눔고딕'이 설치되지 않은 시스템에서의 인터넷 익스플로러 8, 파이어폭스 3.6.10 적용 모습입니다. 웹브라우저에 관계없이 동일한 표현을 보여 줍니다. CSS3 Generator를 참고하면, 파이어폭스 3.5, 구글 크롬 4.0, 사파리 3.2, 오페라 10.1 이상의 웹브라우저에 적용된다고 합니다. (크롬, 사파리, 오페라 사용 유저분의 피드벡 부탁드립니다)

샘플 페이지 : http://einmong.hosting.paran.com/nanumfont/
주1)파이어폭스의 src 규칙
글꼴의 다운로드 경로를 지정하는 src:url('')은 각각의 글꼴이 위치한 상대경로 또는 (http://...)와 같은 전체 경로로 지정해 주면 됩니다.
라고, 위에서 설명해 드렸습니다. 그런데, 기본적으로 파이어폭스는 상대 경로만을 지원합니다. 절대 경로를 사용하거나, 다른 도메인에 있는 글꼴을 이용할 경우 (http://...)와 같은 전체 경로를 이용해야 하는데, 해당 글꼴과 함께 'Access Control Headers'을 함께 전송받아야 이용할 수 있다고 합니다.
@font-face{
  font-family: 'NanumGothicWeb';
  font-style: normal;
  font-weight: normal;
  src: url('http://www.domain.com/font/NanumGothic.eot');
  src: local('☺'), url('http://www.domain.com/font/NanumGothic.woff') format('woff'), url('http://www.domain.com/font/NanumGothic.ttf') format('truetype');
}
예를 들어, 위와 같이 글꼴의 경로를 지정하고 해당 웹페이지에 적용할 경우,
파이어폭스의 URL입력창에 http://www.domain.com/index.html로 접근하면 적용이 되나, http://domain.com/index.html로 접근하면 적용이 되지 않습니다. 이 문제는, 웹호스팅과 도메인을 소유한 설치형 블로그 유저에게는 큰 문제가 되지 않습니다. 호스팅 공간의 적당한 곳에 글꼴을 업로드하여, 상대 경로를 이용해 사용하면 되기 때문입니다. 그러나, 이곳 이글루나 티스토리에는 해결 방법을 모르겠습니다.

이글루에서 웹폰트를 사용하기 위해 다음과 같은 방법을 사용해 보았습니다.
임의로 하나의 문서에 웹폰트를 업로드하여, 글꼴의 경로를 얻습니다. 경로를 살펴보면 (http://pdsxx.egloos.com/xxx/.../NanumGothic.woff)와 같이, 블로그의 도메인(예: einmong.egloos.com)과는 같지 않습니다.
@font-face{
  font-family: 'NanumGothicWeb';
  font-style: normal;
  font-weight: normal;
  src: url('NanumGothic.eot');
  src: local('☺'), url('http://pds20.egloos.com/pds/201010/11/41/NanumGothic.woff') format('woff'), url('NanumGothic.ttf') format('truetype');
}
파이어폭스에서는 위의 코드로 (.woff)글꼴을 사용할 수 없습니다. (.ttf)또한 마찬가지이며, (.eot)는 인터넷 익스플로러 전용이기 때문에, 경로를 어떻게 사용해도 문제되지 않습니다.

* WOFF 포맷 자체가 '동일 출처 제한(same-origin restriction)'을 강제하기 때문에, 웹페이지의 도메인과 WOFF 파일의 도메인이 다르면, 웹브라우저에서 해당 글꼴을 표현하지 않도록 하고 있습니다. 이러한 제한의 완화 방법으로, 글꼴 출처가 되는 웹 사이트에서 HTTP 헤더 값 'Access-Control-Allow-Origin'을 제공하면, 다른 곳에서 WOFF 파일이 사용될 수 있도록 웹브라우저에서 처리하도록 되어 있습니다.

WOFF File Format 1.0 - W3C Working Draft 27 July 2010

주2)font-weight와 인터넷 익스플로러와의 호환성
이 부분은 jay님의 글 'font-weight나 font-style로 표현할 경우 IE와의 호환성 문제가 발생'에서 참고합니다. 그러나, 정확히 이 부분이 어떤 문제가 있는지는 모르겠습니다. 다만, 이 부분이 있다면 다음과 같은 방법으로 코드를 사용하면 됩니다.

NanumGothic.css
@charset "utf-8";
@font-face{
  font-family: 'NanumGothicWeb';
  font-style: normal;
  font-weight: normal;
  src: url('NanumGothic.eot');
  src: local('☺'), url('NanumGothic.woff') format('woff'), url('NanumGothic.ttf') format('truetype');
}

@font-face{
  font-family: 'NanumGothicWebB';
  font-style: normal;
  font-weight: bold;
  src: url('NanumGothicBold.eot');     
  src: local('☺'), url('NanumGothicBold.woff') format('woff'), url('NanumGothicBold.ttf') format('truetype');
}
볼드체의 이름을 위와 같이 다르게 선언해 줍니다.
<style type="text/css">
@import url(NanumGothic.css);
html, body{
  font-family: 나눔고딕, 'NanumGothic', 'NanumGothicWeb', '맑은 고딕', "Malgun Gothic', 돋움, 굴림, Dotum, Gulim, sans-serif;
}
strong, b{
  font-family: 나눔고딕, 'NanumGothic', 'NanumGothicWebB', '맑은 고딕', "Malgun Gothic', 돋움, 굴림, Dotum, Gulim, sans-serif;
}
</style>
그리고, 다르게 선언한 볼드체를 지정하여 사용하거나, 위와 같이 볼드체 관련 HTML 태그를 따로 조정해 주면 됩니다.

윈도우에서 '나눔고딕'을 삭제하고, 여러 테스트와 참고 자료를 읽고 있지만, 파이어폭스에서의 폰트 경로 문제로 아직 이글루 블로그에 폰트가 적용되지 않고 있습니다. 해결할 방법이 없을까요?

@font-face gotchas : http://paulirish.com/2010/font-face-gotchas/#smiley
@font-face support in Firefox : http://webfonts.info/wiki/index.php?title=%40font-face_support_in_Firefox
CSS3 Generator : http://www.css3generator.com
@font-face : http://www.w3.org/TR/css3-webfonts/#font-descriptions

핑백

덧글

  • 웅이 2010/10/12 11:15 # 답글

    좋은 글 고맙습니다. 잘 읽었습니다.
  • hooney 2010/10/13 15:26 # 삭제 답글

    좋은 글입니다.

    많은 분들이 보고 도움 얻으셨으면 좋겠네요. ^_^
  • mOng 2010/10/14 10:38 #

    hooney님 글에서 시작된 포스팅입니다. 좋은 정보는 hooney님께서 주셨구요, 많은 도움 얻었습니다.
  • feelblu 2010/10/14 11:22 # 삭제 답글

    좋은 정보 감사합니다.

    크롬 6.0, 사파리 5.0, 오페라 10.70 beta 에서 잘 보입니다.
  • mOng 2010/10/14 12:38 #

    고맙습니다. 크롬은 개발자 버전에서 확인은 해 봤는데, 사용하는 브라우저가 아니라서요. 모바일 오페라 10에서도 폰트적용이 되더군요. ^^; 사파리는 정말 궁금했습니다.
  • 별이 2010/10/15 18:53 # 삭제 답글

    안녕하세요. 좋은정보 감사합니다.
    이번에 홈페이지에 함초롬체(한글과컴퓨터 http://tinyurl.com/2824k4y )를 사용하려고 합니다.
    그런데 함초롬체가 워드용 폰드로 만들어서인지 용량이 커서 살펴보니.
    폰트의 글자 수가 나눔고딕의 5배에 달하더라구요.
    그래서 위의 툴들로 웹폰트를 만들면 용량이 너무커서 좀 여쭈어 보려고 합니다.


    전에는 WEFT를 사용해서 서브셋을 지정하면 한글 폰트만 사용해서 용량을 많이 줄여서 사용할 수 있었습니다.
    WOFF툴에는 그런 기능이 없나요?
    woff폰트를 만들때 필요한 문자만 넣어 용량을 줄이려면 어떻게 하는게 좋을까요?
  • mOng 2010/10/15 19:10 #

    일단, 제가 알고 있는 woff툴이 'TTF to WOFF'이것밖에 없는데... 이 툴은 그냥 간단하게 명령프롬프트로 변환만 해주기 때문에 그런 옵션이 없네요.

    온라인 변환 사이트 http://onlinefontconverter.com/ 에서는 따로 옵션 지정하는데가 없어서, 테스트 해봤는데 용량이 직접 만든거에 비해 더 크더랍니다(나눔고딕 기준)

    http://www.fontsquirrel.com/fontface/generator/ 에서는 제가 방법을 잘 몰라서인지 아직 성공을 못 했습니다.

    아직, 제가 알고 있는 방법으로는 적당한 답변이 못 될 것 같습니다.
  • hika 2012/02/16 15:52 # 삭제 답글

    웹폰트에 대해서 궁금한 점이 무지 많았었는데 도움이 되었습니다 ^ ^ 감사합니다.
  • 마메쿤 2012/03/17 17:34 # 삭제 답글

    감사합니다. 도움되었어요.
댓글 입력 영역


ClockLink