웹폰트 @font-face

웹폰트적용하는 방법

1. <link>태그에 넣기

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

2. CSS파일안에 import하기

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

3. 직접 서버에 올려서 사용하기

@font-face {
    font-family:"NGR"; 
    src:url(../font/NanumGothic.eot); 
    src:local(※), url(../font/NanumGothic.eot) format("embedded-opentype"), 
        url(../font/NanumGothic.woff) format("woff"), 
        url(../font/NanumGothic.ttf) format("truetype");}

- 참고 : eot(IE8이하 버전 적용), woff(IE9이상버전 적용)

- ttf -> eot 변환툴 

http://ttf2eot.sebastiankippe.com/

- ttf -> woff 변환툴

http://everythingfonts.com/ttf-to-woff

웹폰트 주소

1. 네이버 나눔체

- 출처 Xpress Engine(네이버 개발자센터) 

나눔고딕 : //cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css

나눔바른고딕  : //cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css

나눔고딕(코딩) : //cdn.jsdelivr.net/font-nanum/1.0/nanumgothiccoding/nanumgothiccoding.css

나눔명조 //cdn.jsdelivr.net/font-nanum/1.0/nanummyeongjo/nanummyeongjo.css

나눔펜(손글씨) //cdn.jsdelivr.net/font-nanum/1.0/nanumpenscript/nanumpenscript.css

나눔브러시(손글씨) : //cdn.jsdelivr.net/font-nanum/1.0/nanumbrushscript/nanumbrushscript.css 

2. 한글폰트 모음

- 출처 구글폰트사이트

한나체

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

font-family: 'Hanna', serif;

제주고딕

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

font-family: 'Jeju Gothic', serif;

제주 한라산

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

font-family: 'Jeju Hallasan', serif;

제주명조

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

font-family: 'Jeju Myeongjo', serif;

Kopub 바탕체

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

font-family: 'KoPub Batang', serif;

나눔고딕

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

font-family: 'Nanum Gothic', serif;

나눔고딕코딩

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

font-family: 'Nanum Gothic Coding', serif;

나눔명조

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

font-family: 'Nanum Myeongjo', serif;

나눔브러시

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

font-family: 'Nanum Brush Script', serif;

나눔펜

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

font-family: 'Nanum Pen Script', serif;