본문 바로가기
프로그램개발/ClientSide(JavaScript,Angular,Vue)

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

by 크레도스 2013. 4. 17.

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

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

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

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

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

 

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

 

5개의 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);

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

1
body { font-family: 'Nanum Gothic Coding', serif; }
body { font-family: 'Nanum Gothic Coding', serif; }
나눔브러쉬 (Nanum Brush Script)

나눔고딕(Nanum Gothic)

나눔고딕코딩(Nanum Gothic Coding)

나눔명조(Nanum Myeongjo)

나눔펜(Nanum Pen Script)

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