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

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

 

5 Comments

  1. 한미혜

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

  2. Daniel

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

  3. 워드프레스 초보

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

    1. eastsocial

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

  4. Amumu

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

Leave a Reply to 한미혜 Cancel reply

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