프로그래밍/HTML

NanumSquare 웹폰트 사용해보기

재우니 2018. 4. 20. 15:50


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