웹에서 나눔고딕 폰트 사용하기.... 나눔고딕 웹폰트

네이버에서 제공하는 나눔고딕 폰트를 웹에서 사용하기 위한 코드입니다.

HTML 문서의 윗부분에 아래 코드를 넣어주면 됩니다.

<style type="text/css">

/* 

 * Nanum Barun Gothic (Korean) http://hangeul.naver.com

 */

@font-face {

  font-family: 'Nanum Barun Gothic';

  font-style: normal;

  font-weight: 200;

  src: local('Nanum Barun Gothic UltraLight'), local('Nanum Barun Gothic-UltraLight'), local('NanumBarunGothic UltraLight');

  src: url(./NanumBarunGothicUltraLight.eot);

  src: url(./NanumBarunGothicUltraLight.eot?#iefix) format('embedded-opentype'),

       url(./NanumBarunGothicUltraLight.woff) format('woff'),

       url(./NanumBarunGothicUltraLight.ttf) format('truetype');

}

@font-face {

  font-family: 'Nanum Barun Gothic';

  font-style: normal;

  font-weight: 300;

  src: local('Nanum Barun Gothic Light'), local('Nanum Barun Gothic-Light'), local('NanumBarunGothic Light');

  src: url(./NanumBarunGothicLight.eot);

  src: url(./NanumBarunGothicLight.eot?#iefix) format('embedded-opentype'),

       url(./NanumBarunGothicLight.woff) format('woff'),

       url(./NanumBarunGothicLight.ttf) format('truetype');

}

@font-face {

  font-family: 'Nanum Barun Gothic';

  font-style: normal;

  font-weight: 400;

  src: local('Nanum Barun Gothic Regular'), local('Nanum Barun Gothic-Regular'), local('NanumBarunGothic Regular');

  src: url(./NanumBarunGothic.eot);

  src: url(./NanumBarunGothic.eot?#iefix) format('embedded-opentype'),

       url(./NanumBarunGothic.woff) format('woff'),

       url(./NanumBarunGothic.ttf) format('truetype');

}

@font-face {

  font-family: 'Nanum Barun Gothic';

  font-style: normal;

  font-weight: 700;

  src: local('Nanum Barun Gothic Bold'), local('Nanum Barun Gothic-Bold'), local('NanumBarunGothic Bold');

  src: url(./NanumBarunGothicBold.eot);

  src: url(./NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'),

       url(./NanumBarunGothicBold.woff) format('woff'),

       url(./NanumBarunGothicBold.ttf) format('truetype');

}

</style>

간혹, 폰트가 제대로 적용이 안되는 경우가 있는데, 아래와 같이 CSS 코드를 주석으로 처리할 경우 그런 현상이 발생하기도 합니다.

<style type="text/css">

/* 

@font-face {

  font-family: 'Nanum Barun Gothic';

  font-style: normal;

  font-weight: 700;

  src: local('Nanum Barun Gothic Bold'), local('Nanum Barun Gothic-Bold'), local('NanumBarunGothic Bold');

  src: url(./NanumBarunGothicBold.eot);

  src: url(./NanumBarunGothicBold.eot?#iefix) format('embedded-opentype'),

       url(./NanumBarunGothicBold.woff) format('woff'),

       url(./NanumBarunGothicBold.ttf) format('truetype');

}

*/

</style>

font 폴더에는 폰트파일을 업로드해 주시면 됩니다.

NanumBarunGothic.eot

NanumBarunGothic.ttf

NanumBarunGothic.woff

NanumBarunGothicBold.eot

NanumBarunGothicBold.ttf

NanumBarunGothicBold.woff

NanumBarunGothicLight.eot

NanumBarunGothicLight.ttf

NanumBarunGothicLight.woff

NanumBarunGothicUltraLight.eot

NanumBarunGothicUltraLight.ttf

NanumBarunGothicUltraLight.woff