Html 나눔 웹폰트 적용

요즘은 워낙저작권 때문에 속시끄러운 일이 많아, 아예 폰트를 나눔폰트만 쓰고 있다.
(정상적으로 구매해 놓은 폰트들이 있음에도 불구하고, 회사뿐만 아니라 외주 업체에 의뢰한 일까지 모두 나눔폰트만 쓰도록 강제하고 있다.)

폰트를 유료로 판매하는 것만 아니라면 자유롭게 쓸수 있으니, 나중에 괜히 법무법인에서 내용증명 날라오고 그럴일이 없다.

그러다 보니 자연스럽게 웹마져 나눔폰트를 쓰고 있는데, 각 사용자의 컴퓨터에 나눔폰트를 강제로 설치하게 할 수는 없으니, 결국 웹폰트를 쓰게 된다.

요즘은 구글에서 웹폰트까지 배포를 해주니 별 어려움 없이 웹폰트를 적용할 수 있다.
일단 기본적으로 아무런 스타일 지정없이 페이지를 만들면...

요렇게 했을때는 시스템 폰트로 나오게 된다.

요렇게...
그럼 http://www.google.com/fonts/earlyaccess 여기로 가보면...

지원하는 폰트들의 목록중에서 나눔폰트를 찾을 수 있다.
저기서

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
font-family: 'Nanum Brush Script';

이부분을 사용하면 된다.

이렇게 스타일 시트를 지정하면 된다.
예제는 닷넷의 경우이므로 스타일 시트를 지정할 때, CssClass="showFont" 이렇게 지정했지만, 일반적인 경우라면 class="showFont" 이렇게 지정할 것이다.

암튼 이렇게 지정하면...

이렇게 나눔폰트가 적용된다. (웹폰트라서 로딩되는데 제법 시간이 좀 걸린다.)
만약, 여러종류를 지정할려면...

 이렇게 원하는 만큼 import 시키고, 지정되어 있는 font-family 를 스타일로 지정하면 된다.
그러면...

이렇게 지정한 폰트가 지정된다.

참고로, Import 된 스타일 시트 파일을 열어 보면...

이렇게 되어 있다.
사실상 Import 된 파일은 웹폰트 경로를 지정하는 역할을 할 뿐이다.
그래서, 한글 웹폰트가 제법 큰 관계로 페이지 로딩에 시간이 걸리니, 조금이라도 로딩 시간을 줄이기 위해, 위의 폰트 파일을 다운받아 자신의 웹서버에 올려 놓고...

이런식으로 웹서버에 스타일 시트 파일을 만들어서 로컬 서버의 폰트를 지정해 쓸수도 있다.