웹 폰트 적용 방법론 : 그 어려운 설명과 간단한 해결책
2011년 04월 18일에 작성된 포스트입니다.

[ 재미로 볼 것 : 현재 사용할 필요가 없는 방식임 ]
[ 필요시 4와 5만 참고할 것 ]

 
기다리고 기다리던 익스플로러9이 탄생하며,
각종 브라우저들이 새로운 버젼을 내놓고 있는
2011년 4월,

꽤 오랜만에 웹 카테고리를 채워보려고 합니다.
“웹”이 HS LOG에서는 가장 중요하게 생각하는 카테고리인데
아쉽게도 많이 작성하지는 못하네요.

주제가 광범위하며 쉽지 않기 때문입니다.
이번 주제는 제목에서 보시듯이 웹 폰트입니다.

시작하기 전에 말씀드릴 내용은…
아주 잘 알고 쓰는 글은 아닙니다.
‘웹폰트’는 아직 어렵네요.
생각해보자는 포스트,
혹은 관심은 유도하는 포스트 정도로 봐주셨으면 좋겠습니다.

이번에 HS LOG의 웹폰트를 조금 불완전한 방식에서
조금 더 완전한 방식로 바꾸었습니다.

다음과 같이 바뀌었습니다.

훨~~씬 있어보이네요.
디자인 실력이 안되기에 글자체를 이용해야
이 아무 것도 없는 블로그가 조금이라도 있어 보이겠지요.
기존의 나눔고딕(굵게)를 억지로 eot, ttf로 만들어 사용할 때보다
현재처럼 누군가 만들어 놓은 완벽한 폰트를 가져다가 쓰고,
구글 웹폰트 로더를 사용하니 폰트를 로드하는 시간동안
일반 폰트로 서비스가 가능하기 때문에 훨씬 좋습니다.

웹폰트 설정이 어려운 것은 역시나 크로스브라우징의 문제입니다.
크로스브라우징의 문제라는 것은
결국 어떤 브라우저가 웹 표준을 안지켰거나,
웹 표준이 완성되지 않은 단계에서 발생하는 것이지요.

웹폰트가 중요한 것은 여러가지 이유가 있겠지만
그중에서도 특히 웹서비스시 누구나에게 같은 모양의 페이지를
보여주는 것은 굉장히 중요하기 때문에 웹폰트의 중요성은 높은 편이지요.

때문에 위에서 말씀드린 크로스브라우징의 문제가 생기면
일반적으로 브라우저가 다르거나, 그 버젼이 다르면
페이지를 보는 사람들마다 보여지는 화면이 다른 것이죠.
이건 서비스를 공급하는 쪽의 의도가 아니기에
문제의 소지가 있습니다.

때문에 웹에서 글자를 이미지로 찍어내서 사용하는 경우가 있죠.
디자인적인 어떠한 요소도 없는 상황에서 폰트를
이미지로 대체하는 것은 무의미한 짓이지요.
시간 낭비입니다.
글자를 바꾸고 싶으면 이미지를 교체해야 하는 것 또한
시간 낭비입니다.

우선 세가지 폰트 포멧이 있습니다.

1. woff : Web Open Font Format 위키에서 설명 보기
2. ttf : True Type Font 위키에서 설명 보기
3. eot : Embedded OpenType 위키에서 설명 보기
※ 참고 : 컴퓨터 글꼴에 대한 설명 위키에서 보기

더 자세한 내용은 위키피디아에서
영문으로 검색하시면 좋습니다.^^;

woff 가 현재 웹 표준 진행중인 웹 오픈 폰트 포맷이며,
TTF 는 일반적으로 사용하는 트루 타입 폰트 포맷이 되겠습니다.
eot 는 마이크로소프트에서 사용하는 포맷으로
익스플로러에서 잘 읽히는 eot 포맷이 되겠습니다.

네~ 문제는 브라우저에 따라, 또는 브라우저의 버젼에 따라
읽어내는 폰트 포맷이 서로 다릅니다.
표준 포맷인 woff 가 있습니다만,
2009년에 개발된 포맷이기 때문에
그 이전에 탄생한 브라우저들은 woff를 지원하지 않는 문제가 있습니다.
그리고 woff 이전의 ttf나 eot와 같은 포맷들은
자기 맘대로 지원하는 브라우저가 있고, 아닌 브라우저가 있는 것이죠.

때문에 우리네 블로그나 사이트에 폰트포맷을 직접 적용하는 것은
상당히 어려운 일입니다.
요즘같이 많은 브라우저가 쓰이며, 계속되는 버젼업에
모바일 브라우저들까지 난리인 와중에
어떤 브라우저가 어떤 포맷을 지원하는지..
알게 뭡니까?

그저 표준 포맷인 woff를 따라주기를 바라지만
우리네 네티즌들은 절대 브라우저의 마지막 버젼만을 사용하지 않기에
진정한 크로스 브라우징을 위해서는 모든 브라우저를 지원하는 방식이
필요합니다.

그리고 열심히 웹 서핑을 하던 도중 대체 누가 만든지 모르는
fontface.kr 이란 사이트를 찾았습니다.

나눔고딕, 나눔고딕(굵게), 나눔명조, 나눔명조(굵게),
나눔손글씨 펜체, 나눔손글씨 붓체
위의 여섯가지 폰트를 구글 웹폰트로더 API를 이용하여
로드하는 방식에 대한 예제와 기술을 제공합니다.
가서 보시면 좋습니다.
fontface.kr로 가서 보기

예제는 다음과 같이 단순합니다.

<script src="//www.google.com/jsapi"></script>
<script>
google.load( "webfont", "1" );
google.setOnLoadCallback(function() {
WebFont.load({ custom: {
families: [ "NanumGothic" ],
urls: [ "//fontface.kr/NanumGothic/css" ]
}});
});
</script>

구글 웹 폰트 로더를 로드하고, 관련 스타일(CSS)를 로드하면 끝나는 것입니다.
위의 예제에 따르면 폰트의 이름은 NanumGothic 이 되므로
위의 예제가 로드된 페이지라면 NanumGothic 을 새로운 폰트로 쓸 수 있습니다.

fontface.kr 이 제공하는 //fontface.kr/NanumGothic/css 파일은
단순한 CSS 파일이 아니라, 서버사이드 프로그래밍을 통해 해당 클라이언트에게
알맞는 CSS 파일을 떨궈주는 특별한 기능이 있는 파일입니다
결국 브라우저별로 eot, ttf, woff 중 어떤 폰트 포맷을 로드해야 하는지 결정해주고,
그 이후에 딱 맞는 스타일(CSS)을 제공합니다.
또한 기본적으로 구글 웹 폰트 로더를 사용하기 때문에
페이지를 로드한 상태에서 폰트를 변화시킬 수 있으므로
사용하는 우리의 입장에서는 웹 폰트에 대한 어떤 것도 더 생각할 필요가 없어지는 것이죠.
단, 외부의 폰트 포맷을 로드하는 것이기 때문에 폰트를 로드하는데 조금 시간이 걸립니다.

속도 때문에 HS LOG는 PHP를 통해 브라우저를 구별하여 위 포맷들을 적용했는데
많은 속도 차이가 나는 것은 아니네요.
fontface.kr의 예제를 사용해도 무방할 것 같습니다.

실제 fontface.kr 의 수정없는 예제 테스트는 HS LOG가 아닌
타 사이트에서 진행해본 결과 이상없이 진행되었습니다.

웹폰트에 대해 관심이 많다면 아래 두 링크를 참고해주세요.
a Little Fantasy : 웹폰트(Downloadable Font), 크로스 브라우징 – EOT, WOFF, TTF
/’pəlp/ : 블로그에 유용한 태그 – 티스토리 블로그에 웹폰트 적용하기

fontface.kr 의 서비스를 이용하면 웹 폰트에 대한
완벽한 크로스브라우징을 쉽게 지원받을 수 있기 때문에
굉장히 편리하네요.

물론 나눔 글꼴에 대한 지원만 하고 있는 점이 아쉽지만
그래도 한글 글꼴에 대한 지원이 있어서 좋습니다.
영문 글꼴에 대한 부분은 역시! 구글에서 지원받을 수 있습니다.
구글에서는 이미 구글 웹 폰트 API를 제공하고 있기 때문입니다.
//www.google.com/webfonts

다양한 웹 환경에 대한 발전에 따라
웹 표준은 발전해왔고, 크로스 브라우징의 중요성이 날이 갈수록
부각되고 있습니다.

웹 폰트에 관련된 기술은 사이트의 기본이 되는 부분이며,
웹 디자인, 프로그래밍, 퍼블리슁의 모든 요소에 관련된 부분이기 때문에
매우 중요한데요.

많은 글꼴들이 다양한 브라우저에서 같은 모습으로 보여지는 그 날을
기대해봅니다.

감사합니다.



- hyunsik.me -

관련 있는 글

  • DAUM 주소-좌표 API + GOOGLE MAP API
  • Good bye 2010 – 2010년 12월
  • HTML5 오픈 컨퍼런스 열린다. * 2010년 7월 2일
  • MS 인터넷 익스플로러 9 베타, 테스트 후기
  • [영화] 로미오와 줄리엣 (Romeo and Juliet)
  • 구글 애널리틱스(Google Analytics)를 사용해보며
  • 구글, 익스플로러6에게 “good bye”를 외치다!
  • 나이키+ GPS 를 사용하며
  • 맥용 곰플레이어, Gom for Mac 미리보기
  • 블로그에 파비콘(Favicon)을 달자!
  • 아이폰 3GS에서 아이폰 4로 옮겨가며~
  • 애플, 아이폰 4(iPhone 4) 공개 및 국내 출시 확정
  • 애플, 아이폰4 화이트 : 아주 짧은 리뷰
  • 애플의 HTML5 데모 사이트 – Safari Technology Demos
  • 애플의 맥 OS X 10.7 라이온(Lion)을 바라보며

    • 현식로그 홈 정보기술(IT) 목록
    15 Comments

    1. 라메카 4월 27th, 2011 at 10:52 오후

      안녕하세요. 웹폰트를 적용해보려고 검색하다가 들어오게 됐습니다^^; 위의 방법을 티스토리에서 적용할 수 있는 방법은 없나요? 제가 초보라서;; 염치없이 도움 좀 부탁드리겠습니다.

    2. hyunsik 4월 28th, 2011 at 10:56 오전

      저도 티스토리에 대해 알고 있는 지식이 없습니다. 어떤 한계가 있는 지 알지 못합니다. 우선 포스트의 링크 중에 티스토리 관련 링크를 참고해주시고, 꼭 이 방법으로 해야겠다 하시면 티스토리에서 위의 방법론이 왜 적용될 수 없는지 말씀해주시면 답변드리겠습니다. 읽어주셔서 감사합니다. ~ nice day!!!

    3. 라메카 4월 28th, 2011 at 12:55 오후

      답변 감사합니다. 어찌어찌 막 하다 보니 ‘적용’이 되었습니다;;; 으하핫; 어떻게 된건지는 몰라도 결과론적으로 된건 현식님 덕분이라능; 고맙습니다.

    4. hyunsik 4월 28th, 2011 at 3:10 오후

      라메카님의 블로그… 보았는데
      나눔고딕(일반)으로 지정하신 거 맞죠? ^^
      잘 보입니다.
      감사합니다, 자주 놀러 오세요~~ ^^

    5. 라메카 4월 28th, 2011 at 4:26 오후

      넵^^ 저도 이걸로 포스팅 하나 해야것네요~ 흐허허

    6. JisuPark 9월 1st, 2011 at 10:34 오전

      안녕하세요 🙂 좋은 글 잘 참조하고 갑니다.

      현식님 블로그 글이 가독성이 정말 좋은데 혹시 이것도 나눔고딕인가요?

      기존 폰트보다 약간 슬림한 느낌이라 헷갈리네요 ^^;

      혹시 괜찮으시면 폰트/크기/줄간격 알려주시면 폰트 디자인하는데 도움이 많이 될 것 같습니다.

      좋은 정보 고맙습니다!

    7. hyunsik 9월 6th, 2011 at 11:41 오후

      ^^
      나눔고딕이 맞습니다. (아마 굵은 체일겁니다. ^^)
      나머지 정보는… ㅜ.ㅜ
      CSS를 참고해주세요..
      제가 뒤져보려했는데…
      에너지가 없습니다. ㅎㅎ
      이해해주시고, 답변 감사합니다.
      블로그에 달린 답변은 사는 재미를 느끼게 해주세요.~ ^^

    8. aprilbriz 1월 12th, 2012 at 5:41 오후

      정보 감사합니다~

      근데 http://fontface.kr 은 Firefox 에서는 안되네요.
      찾아보니 파폭은 도메인이 다르면 폰트를 쓸 수가 없고, 폰트 파일 헤더에 Access-Control-Allow-Origin 이 있어야하는데 구글 서버에는 없더라구요;
      저 사이트 만드신 분께 얘기해야하긴하겠으나;;

      비슷한 서비스로 http://mobilis.co.kr/webfonts/ 여기도 있는데
      여기 폰트 파일의 헤더엔 Access-Control-Allow-Origin 이 적용돼있더군요.

    9. hyunsik 1월 13th, 2012 at 12:24 오전

      예. 저도 얼마전에
      안되는 거!!! ^^ 확인했습니다. ㅜ.ㅜ

      아.. Access-Control-Allow-Origin 을 추가하면 되는 거군요.
      현식로그는 자체적으로 흡수하여 관계없으나,
      지금 fontface.kr 추가시 파이어폭스, 익스플로러9 에서
      폰트가 제대로 적용되지 않는 문제가.. ㄷㄷㄷ
      역시 크로스도메인 정책이 적용된 결과겠죠~..

      결국…
      왠만해서는 폰트를
      다 흡수하는 방법을 추천드립니다.

      http://fontface.kr 쪽에도 메일을 보내야겠네요.
      좋은 정보, 감사합니다.

    10. 김호준 7월 9th, 2012 at 3:35 오후

      안녕하세요! 나눔으로 적용을 해보았는데요. 아래와 같은 문구가 뜨는데 원인을 잘 모르겠습니다. 혹시 해결 방법을 아시나요?

      “이 페이지는 컨트롤에 없는 정보를 액세스하고 있습니다.
      이 작업은 보안상 위험합니다. 계속 진행하시겠습니까?”

      요 문구 입니다.

    11. hyunsik 7월 10th, 2012 at 10:01 오후

      우선… 방문해주셔서 감사합니다.

      해당 내용은 제가 정확하게까지 알 수가 없네요.
      단, 위의 대화 내용을 보시면 아시겠지만

      http://fontface.kr 측의 설정으로 인해
      크로스도메인 정책때문에
      생긴 문제가 아닐까 생각해봅니다.

      위의 aprilbriz님이 말씀해주신대로
      http://mobilis.co.kr/webfonts/
      쪽의 방식을 사용해보세요.

      제가 해드릴 수 있는 말은 여기까지 입니다.
      도움이 되셨으면 좋겠습니다.

      감사합니다.

    12. hyunsik 8월 28th, 2012 at 11:09 오후

      내용이 더 필요하신 분들께서는
      다음 글을 참고해주세요.

      웹 폰트 적용 방법론 II : 그보다 더 강력한 해결책

    13. Abubaman 3월 30th, 2013 at 9:12 오후

      현재 웹폰트 문제로 골머리를 앓고 있는 유저입니다 ㅠ

      그런데 fontface.kr 홈페이지도 ie9에서 폰트적용이 제대로 되지 않더군요ㅠ. 경로를 따라가 보니 woff를 로드 하던데,,,

      모빌리스는 ie9에서 잘 보이더라구요;; 그런데 여기 경로를 따라가보면 eot를 로드합니다.

      어떤게 맞는건가요? ie9에서도 eot를 로드하는게 맞나요??

    14. 임현식 4월 1st, 2013 at 11:13 오후

      우선 ie9은 woff를 지원하므로
      표준 포맷인 woff 를 로드하는 것이 좋습니다.

      하지만 위 댓글에 보여지다시피
      fontface.kr 에서 설정을 바꾸지 않아서
      크로스도메인의 문제가 발생한 듯 합니다. ㅜ.ㅜ

      부디 http://hyunsik.me/wordpress/?p=5048 를 참고하시어
      사이트 내부에 폰트를 가지고 있는 방식을 추천드립니다.
      이 경우 로딩도 빨라질 뿐만 아니라
      타 사이트때문에 폰트가 읽히고 안읽히고 하는 문제가 없어집니다.

      댓글 남겨주셔서 감사합니다.

    15. 임현식 2월 23rd, 2015 at 1:50 오전

      http://hyunsik.me/wordpress/?p=5698

      위 링크를 통해
      구글 웹폰트를 사용하는 방법을 추천드립니다.
      – 현식로그 –

    방문해 주셔서 감사합니다. 답글을 남겨주시면 잊지 못할 것입니다.

    현식로그 홈 정보기술(IT) 목록

     
    이 글의 방문자수는 1,389 입니다. (젯팩이 측정)