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

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

해당 폰트는 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가 있으므로 필요하신 만큼 적용하면 되겠습니다.

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);

 

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

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 폰트를 나눔고딕으로 적용하였습니다.

5 Comments

  1. 좋은 내용이네요. 감사합니다.^^

    Reply
  2. 좋은 정보 감사합니다. 잘 되네요.

    Reply
  3. 코드를 바꾸는 위치를 알려주시면 더 좋을 듯 합니다.
    감사합니다.

    Reply
    • 테마의 style.css파일에서 바꾸고 싶은 부분을 적용하시면 됩니다. 에디터에서 font-family로 검색하면 쉽게 찾을 수 있습니다.

      Reply
  4. 좋은 정보네요. 웹에 나와 있는 여러 방법중에 제일 쉽고도 정확하네요.

    Reply

Trackbacks/Pingbacks

  1. 지난 한 달간 트윗 모음 2012-11-10 | 웹으로 말하기 - [...] 구글웹폰트 나눔폰트 적용하기 http://eastsocial.co.kr/2012/10/904 #12년 11월 9일 – 2:31 [...]
  2. 구글웹폰트 나눔폰트 적용하기 | DSYNC Design Studio - [...] : http://eastsocial.co.kr/2012/10/904 (wordress for social website에서 [...]
  3. 워드프레스 한글 폰트 적용 완전정복 – Get Social Korea - [...] 구글웹폰트 나눔폰트 적용하기 [...]

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" extra="">

Share This