NanumSquare 웹폰트 사용해보기

nanumsquare.css 

/*

* Nanum Square Web Fonts

* Copyright (c) 2010, NAVER Corporation (http://www.nhncorp.com)

*/

@font-face {

font-family: "NanumSquareLight";

src: url(/font/NanumSquareL.eot);

src: url(/font/NanumSquareL.eot?#iefix) format('embedded-opentype'),

url(/font/NanumSquareL.woff) format('woff'),

url(/font/NanumSquareL.ttf) format('truetype');

}

@font-face {

font-family: "NanumSquare";

src: url(/font/NanumSquareR.eot);

src: url(/font/NanumSquareR.eot?#iefix) format('embedded-opentype'),

url(/font/NanumSquareR.woff2) format('woff2'),

url(/font/NanumSquareR.woff) format('woff'),

url(/font/NanumSquareR.ttf) format('truetype');

}

@font-face {

font-family: "NanumSquareBold";

src: url(/font/NanumSquareB.eot);

src: url(/font/NanumSquareB.eot?#iefix) format('embedded-opentype'),

url(/font/NanumSquareB.woff2) format('woff2'),

url(/font//NanumSquareB.woff) format('woff'),

url(/font/NanumSquareB.ttf) format('truetype');

}

<link rel="stylesheet" href="nanumsquare.css"> 를 상단에 추가하고....

스타일시트 구현한다.

<style type="text/css">

.caption4 {

font-family: "NanumSquare";

font-size: 19px;

line-height: 28px;

font-weight: 600;

}

</style>

<p class="caption4">동해물과 백두산이 마르고 닳도록</p>

아니면... https://github.com/moonspam/NanumSquare 여기 사이트가면 쉽게 사용하는 방법도 제공합니다.

NanumSquare.zip