웹폰트를 사용하는 또 다른 방법 (API) 이용

demun
퍼블리셔/기술
2011. 10. 26. 12:24

이번에는 API 를 이용하는 방법을 알아보겠습니다.
이전에 알려드린 방법은 다소 어려운 부분이 있고 모든 브라우져에서 지원을 하지 않아 따로 주석을 넣어야하는 불편함이 있었습니다.
하지만 API를 이용하면 간단하고 모든 브라우져에서 동일하게 보여질수 있다는 장점이 있습니다.

웹폰트를 사용하는 올바른 방법(나눔고딕폰트,티스토리에서 사용하는 방법) =>http://demun.tistory.com/1930

문제는 API 를 지원해줘야 한다는 것입니다.
자 이제 시작해보겠습니다.
API 를 지원하는곳은 현재 제가 알기로는 두군데가 있습니다. 이또한 언제까지 지원할지는 모르지만 현재는 지원하고 있습니다.

1. http://fontface.kr/

나눔고딕관련 글꼴만 지원하고 있습니다.
나눔고딕, 나눔고딕(굵게), 나눔명조, 나눔명조(굵게), 나눔손글씨 펜체, 나눔손글씨 붓체 이렇게 지원합니다.
자세한 것은 홈페이지에 있으니 간략하게나마 사용하는 방법을 알려드리겠습니다.
<head> 와 </head> 사이에 아래의 코드를 넣어주세요.

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

html 은 이걸로 설정은 끝입니다. 스타일설정에서 나눔고딕을 설정하고 싶으면 아래처럼 나눔고딕을 추가해주기만 하면 됩니다.

.test-class {
	font-family:NanumGothic,"나눔고딕";
}

2. http://api.mobilis.co.kr/webfonts/

모빌리스라는 곳에서 api 를 서비해주는데요. 여기는 나눔고딕뿐만 아니라 은글꼴,백묵글꼴,렉시글꼴,은진글꼴 등을 이용할수 있습니다.
한가지 주의할것은 블로거처럼 개인은 사용을 해도 되나 영리를 목적으로 하는곳은 사용하면 안됩니다.
홈페이지를 꼭 둘러보세요. 라이센스에 대한 글이 있으니 참고하시기 바랍니다.
모빌리스 웹폰트 홈페이지 => http://api.mobilis.co.kr/webfonts/

아래처럼 원하는 글꼴을 선택하고 해당 글꼴을 클릭하면 사용방법이 나옵니다.
아래는 나눔고딕에 마우스를 올렸을때 입니다.

사용방법은 마찬가지로 <head> 와 </head> 사이에 아래의 코드를 넣어주면 됩니다.

<link href='http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb' rel='stylesheet' type='text/css' />

해당글꼴마다 NanumGothicWeb 라고 적힌부분이 바뀝니다. 꼭 해당 글꼴을 클릭해서 해당주소를 넣어주세요.

그런다음 위와같이 지정해주기만 하면 됩니다.

.test-class {
font-family:'NanumGothicWeb';
}

여기까지 입니다. 위의 두가지 방법은 어느 브라우져에서나 동일하게 보여집니다. 크로스 브라우징 환경을 만들수 있다는 이야기 입니다.
참고로 모빌리스 웹폰트는 jQuery 를 활용해서 좀더 디테일하게 폰트를 설정할 수 있습니다.
해당 글꼴을 클릭하면 사용방법이 나와 있으니 참고하시기 바랍니다.

개 개

demun(대문블로그)

웹폰트를 사용하는 또 다른 방법 (API) 이용

티스토리툴바