Daum font로 Google Font API 따라잡기

이전에 작성한 글처럼, Google Font API의 구조는 무척 사용하기 쉽습니다. 기존에 Google API(예: AJAX API)를 사용해보신 분이라면 부연 설명이 전혀 필요없겠지만, 그렇지 않은 분들이라면 CSSHTML에 사용하는 4가지 방법에 대한 간단한 기초 지식이 필요합니다.

  • inline Style: HTML 엘리먼트의 style 속성을 사용해서 코드를 작성함.
  • embeded Style: HTML head에 style 코드를 작성함.
  • Linked Style: 외부의 CSS 파일을 연결함. Google Font API 방식임.
  • import Style: 외부의 CSS 파일을 불러옴.

위 Linked Style 방식을 이용해서Google Font API를 쉽게 흉내낼 수 있습니다. Daum이 공개한 글꼴을 이용해서 결과를 아래 이미지를 클릭하시면 확인할 수 있습니다. (참조: 테스트 HTML 문서CSS 파일)

test-google-font-api

몇 해 전부터 국내에도 Naver, Daum, 한겨레 등 많은 기업들이 한글 글꼴을 제공하고 있습니다(참조:정태영님 공개 글꼴 목록, KLDP 공개 글꼴 목록). 대부분 파일을 다운받아 사용할 수 있는데, 이를 Google Font API처럼 제공한다면 보다 많은 웹 제작자들이 쉽게 사용할 수 있을 것입니다.



7개의 의견이 있습니다. | 당신의 의견을 바랍니다.

  1. 1. Gravatar arozin | 2010.05.20 , 오후 06:23 · permallink

    멋집니다!!!

    “Oh My Goole!”? 의도하신 건가요? Google? g가 빠진 건가요? ^^;

  2. 2. Gravatar Hooney | 2010.05.20 , 오후 06:29 · permallink

    @arozin: 의도하진 않았지만, 고칠 필요까진 없을 거(아님 귀찮아서) 오타를 방치하고 있네요. :)

  3. 3. Gravatar 빛알 | 2010.05.21 , 오전 01:59 · permallink

    참, ttf만 쓰면 IE에서 안 됩니다. IE는 아직 eot만 지원하니까요.

    http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

    를 보시면, 어떻게 IE에서도 동작하게 하는지 나와 있습니다. 그 페이지에 eot 변환 도구에 대한 링크도 아마 있을 것입니다.

  4. 4. Gravatar Hooney | 2010.05.25 , 오전 09:38 · permallink

    @빛알: 앗. 제가 테스트를 잘못했군요. 바로 내용 수정할께요.

    EOT에 대한 좋은 자료 알려주셔서 감사합니다. 평소 타이포그라피에 관심을 갖고 있었는데, 제가 모르던 것들이 많네요.

    W3C 국제화 그룹의 글을 찾아보니, 최근에 webfont에 대한 테스트 결과가 업데이트됐더군요. http://goo.gl/INrQ

    감사합니다. ^^

  5. 5. Gravatar 삐루루 | 2010.06.15 , 오전 10:53 · permallink

    정보 감사합니다. 덕분에 필요한 정보를 찾았습니다. ^^

  6. 6. Gravatar 조규태 | 2011.01.30 , 오후 10:41 · permallink

    좋은 정보 감사드립니다.

    그런데 웹표준 개발을 하면서 한글은 항상 아쉽습니다.
    좋게 말하면 과학성,체계성이지만 나쁘게 말하면 ‘복잡성’때문인 것 같네요. 폰트 파일 하나에 그 모든 글자형태를 저장하다보니 여차하면 거의 KB단위에서 MB단위로 뛰고..거기다 IE까지 지원하기위해 그런 사이즈 큰 파일을 ttf뿐 아니라 eot까지 갖추고 있어야하니 이거 원.

    저희 회사에서 운영하는 사이트에도 나눔고딕을 사용해봤는데, 그 트래픽양때문에 골머리를 썩다가 포기를 했던 기억이 나네요 ^^;

  7. 7. Gravatar C&T Dream Global – This is test post | 2012.09.06 , 오후 06:27 · permallink

    [...] Daum font로 Google Font API 따라잡기 [...]

당신의 의견을 바랍니다..

사용할 수 있는 HTML 태그 : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Aboout Author

조훈 Hooney라는 ID로 온라인에서 활동하는 조훈입니다.
자세히 보기 »

CSS Reference

Hooney와 함께 만드는 CSS Reference!


Be Friend~! Be Friend~!