나눔글꼴 웹폰트 종결자

1 개요

나눔글꼴 웹폰트 종결자
나눔고딕, 나눔바른고딕 웹폰트 설정

link 또는 import 방식으로 구글과 jsdelivr의 웹폰트 CSS를 로딩 가능
두 방식의 성능차이는 거의 없다.

어차피 woff 파일을 얼마나 빨리 다운로드하는지가 중요함

한번 다운로드되면 로컬의 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 같이 보기