구글웹폰트 나눔폰트 적용하기

2018년 봄, 구글 폰트에 한글 폰트가 정식으로 업데이트 되었습니다.

이제 더 이상 early access를 이용하지 않아도 됩니다.

 

https://fonts.google.com/

 

—이하 구 버전 글—

구글웹폰트에서 드디어 한글웹폰트로 나눔폰트를 사용할 수 있다는 소식을 듣고 부랴부랴 테스트 해보았습니다.

해당 폰트는 google webfonts의 테스트 단계에 해당되는  google webfont early access에서 찾을 수 있습니다.

나눔글꼴은 산돌커뮤니케이션(Sandoll Communications)과 폰트릭스(Fontrix)가 개발한 폰트이고, 네이버에서 배포하고 있는 무료 폰트입니다.

웹폰트 사용법은 쉬운 편이라 간단히 공유해 봅니다.

style.css 파일에 아래를 추가합니다.(원하는 폰트로)

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

5개의 css가 있으므로 필요하신 만큼 적용하면 되겠습니다.

2014년에 아래 5개 폰트가 신규 추가되었네요.

@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);

@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);

@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);

@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);

@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);

 

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

 

폰트의 속성을 정의하고 싶은 부분에 해당 정의를 지정합니다.

body { font-family: 'Nanum Gothic Coding', serif; }

나눔브러쉬 (Nanum Brush Script)

나눔고딕(Nanum Gothic)

나눔고딕코딩(Nanum Gothic Coding)

나눔명조(Nanum Myeongjo)

나눔펜(Nanum Pen Script)

 

2012년 10월 13일 자로 이 사이트는 body 폰트를 나눔고딕으로 적용하였습니다.