나눔바른고딕 웹폰트 적용하기

나눔바른고딕 웹폰트 적용하기

한글을 주 언어로 사용해야 하는 홈페이지를 제작할 때 항상 어려움을 겪는 부분은 웹에서 사용할 한글 폰트가 매우 부족하다는 것입니다. 물론 상용 서비스로 웹폰트를 호스팅하는 업체들도 있지만 비용이 만만치 않지요. 영문 폰트의 경우에는 구글에서 무료로 제공하는 셀 수 없이 많은 폰트들이 있어서 디자인에 제약이 적은 편입니다. 그래도 아쉬운대로 네이버에서 제작 배포하는 나눔바른고딕이 웹폰트로 사용하기에 그나마 제일 낫지 않나 싶습니다.

시작하기

나눔바른고딕 웹폰트는 2가지 형태으로 사용할수 있습니다.

기본

웹사이트HTML문서의 <head>안에 아래 코드를 붙혀 넣으시면 됩니다.

<link href='http://www.openhiun.com/hangul/nanumbarungothic.css' rel='stylesheet' type='text/css'>

 

@import

웹사이트HTML문서의 <head>안의 스타일 시트에 아래 코드를 붙혀 넣으시면 됩니다.

@import url(http://www.openhiun.com/hangul/nanumbarungothic.css);

적용하기

폰트를 적용하려면 폰트 이름을 적용하길 원하는 CSS에 다음과 같이 추가하시면 됩니다.

font-family: 'Nanum Barun Gothic', sans-serif;

예를들어 폰트를 body에 적용시키고 싶다면 아래처럼 하시면 됩니다.

<style type="text/css">
body {
  font-family: 'Nanum Barun Gothic', sans-serif;
}
</style>

혹은 text라 불리는 클래스에 적용시키고 싶으시다면 아래와 같겠죠?

<style type="text/css">
.text {
  font-family: 'Nanum Barun Gothic', sans-serif;
}
</style>