본문 바로가기

퍼블리싱/CSS/CSS3

웹폰트 @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 변환툴


웹폰트 주소

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;