"나눔글꼴 웹폰트 종결자"의 두 판 사이의 차이

2017년 6월 21일 (수) 16:39 판

1 개요

나눔글꼴 웹폰트 종결자
나눔고딕, 나눔바른고딕 웹폰트 적용

link 또는 import 방식으로 구글과 jsdelivr의 웹폰트 CSS를 로딩 가능
아래 예시를 참고하되 페이지에 필요없는 폰트는 빼자.

woff 파일을 내려받는 데 상당한 시간이 소요된다.

2 link 방식

<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/nanumgothic.css">
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/nanumgothiccoding.css">
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/nanummyeongjo.css">
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/nanumbrushscript.css">
<link rel="stylesheet" href="//fonts.googleapis.com/earlyaccess/nanumpenscript.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css">
<style>
div { float: left; }
.normal * { font-weight: normal; }
</style>

<div class='normal'>
	<h2>기본 글꼴</h2>
	<h2 style="font-family: 'Nanum Gothic';">나눔고딕</h2>
	<h2 style="font-family: 'Nanum Gothic Coding';">나눔고딕코딩</h2>
	<h2 style="font-family: 'Nanum Myeongjo';">나눔명조</h2>
	<h2 style="font-family: 'Nanum Brush Script';">나눔손글씨 붓체</h2>
	<h2 style="font-family: 'Nanum Pen Script';">나눔손글씨 펜체</h2>
	<h2 style="font-family: 'Nanum Barun Gothic';">나눔바른고딕</h2>
</div>
<div class='bold'>
	<h2>기본 글꼴</h2>
	<h2 style="font-family: 'Nanum Gothic';">나눔고딕</h2>
	<h2 style="font-family: 'Nanum Gothic Coding';">나눔고딕코딩</h2>
	<h2 style="font-family: 'Nanum Myeongjo';">나눔명조</h2>
	<h2 style="font-family: 'Nanum Brush Script';">나눔손글씨 붓체</h2>
	<h2 style="font-family: 'Nanum Pen Script';">나눔손글씨 펜체</h2>
	<h2 style="font-family: 'Nanum Barun Gothic';">나눔바른고딕</h2>
</div>

3 import 방식

<style>
@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/nanumbrushscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);

div { float: left; }
.normal * { font-weight: normal; }
</style>

<div class='normal'>
	<h2>기본 글꼴</h2>
	<h2 style="font-family: 'Nanum Gothic';">나눔고딕</h2>
	<h2 style="font-family: 'Nanum Gothic Coding';">나눔고딕코딩</h2>
	<h2 style="font-family: 'Nanum Myeongjo';">나눔명조</h2>
	<h2 style="font-family: 'Nanum Brush Script';">나눔손글씨 붓체</h2>
	<h2 style="font-family: 'Nanum Pen Script';">나눔손글씨 펜체</h2>
	<h2 style="font-family: 'Nanum Barun Gothic';">나눔바른고딕</h2>
</div>
<div class='bold'>
	<h2>기본 글꼴</h2>
	<h2 style="font-family: 'Nanum Gothic';">나눔고딕</h2>
	<h2 style="font-family: 'Nanum Gothic Coding';">나눔고딕코딩</h2>
	<h2 style="font-family: 'Nanum Myeongjo';">나눔명조</h2>
	<h2 style="font-family: 'Nanum Brush Script';">나눔손글씨 붓체</h2>
	<h2 style="font-family: 'Nanum Pen Script';">나눔손글씨 펜체</h2>
	<h2 style="font-family: 'Nanum Barun Gothic';">나눔바른고딕</h2>
</div>

4 같이 보기