in 웹 디자인

Daum font로 Google Font API 따라잡기

이전에 작성한 글처럼, Google Font API의 구조는 무척 사용하기 쉽습니다. 기존에 Google API(예: AJAX API)를 사용해보신 분이라면 부연 설명이 전혀 필요없겠지만, 그렇지 않은 분들이라면 CSS를 HTML에 사용하는 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처럼 제공한다면 보다 많은 웹 제작자들이 쉽게 사용할 수 있을 것입니다.

댓글 남기기

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

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

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

    감사합니다. ^^

  2. 좋은 정보 감사드립니다.

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

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