24'C 구름 많음
서울 강남구
네이버에서 베포하고 있는 나눔폰트는 개인, 기업 모두 라이센스 무료이기 때문에 매우 다양한 곳에서 활용되고 있습니다. 특히 인터넷 사이트에서도 나눔글꼴이 많이 사용되고 있는데요..
윈도우에는 나눔글꼴이 기본으로 설치되어 있지 않습니다. 맥 OSX는 기본 설치되어 있지만요..
그래서 웹에서 스타일로 나눔글꼴을 지정하면 자기 pc에 글꼴이 깔려 있지 않으면 표시가 않됩니다.
이럴때 사용하는것이 바로 웹폰트입니다. 웹상에 폰트를 올려놓고 주소로 가르켜 해당 폰트를 로드하는 방식이죠. 이런 방식을 사용하면 어떤 pc에서도 해당 폰트가 제대로 표시됩니다. 그리고 고맙게도 구글에서는 이러한 웹폰트를 다양하게 지원해 주고 있습니다.
그럼 웹폰트로 나눔폰트 사용하는 방법 알아보도록 하겠습니다.
1.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>
2.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>
이렇게 두가지 방식중에서 본인이 편한 방식으로 선댁하여 사용하면 됩니다. css 파일을 어떻게 불러올것인지만 약간 차이가 난다고 보면 되겠습니다. 둘다 아래와 같이 동일하게 출력이 됩니다.