나눔글꼴 - 구글 웹폰트

 구글 웹폰트

  http://www.google.com/fonts/

 구글 웹폰트 - 나눔글꼴

  아래 Earlyaccess 에서 Nanum 검색 --> URL 임포트 into CSS
  http://www.google.com/fonts/earlyaccess

나눔글꼴

나눔고딕           @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);                         
                          font-family: 'Nanum Gothic', sans-serif;          

나눔명조           @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);    
                          font-family: 'Nanum Myeongjo', serif;
나눔고딕코딩    @import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
                          font-family: 'Nanum Gothic Coding', monospace;
나눔손글씨펜체 @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
                           font-family: 'Nanum Pen Script', cursive;
나눔손글씨붓체 @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
                           font-family: 'Nanum Brush Script', cursive;                      

Serif ?

    Serif : 글씨체 끝 부분에 장식 모양을 일컬음.
    Serif font : 세리프가 있는 폰트    바탕, 궁서, 명조, Times new Roman 등...
    Sans-serif font : 세리프가 없는 폰트    굴림, 돋움, 고딕, Arial, Tahoma, Verdana 등...

라이센스 정책 확인 필수

SIL Open Font License, 1.1 | Download

기본 폰트 설정

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

HTML 에서 불러 쓰기

<link href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css' rel='stylesheet' type='text/css'>

외부 웹 --> !important 

*{font-family: 'Nanum Gothic', san-serif !important;}

CSS 예제) 

1 2 3 4 5

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.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 2 3 4 5 6

body { color: #666666; font-family: 'Nanum Gothic','Nanum Brush Script','Nanum Gothic Coding','Nanum Myeongjo','Nanum Pen Script'; font-size: 12px; line-height: 20px; }