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

반응형

저작자표시비영리동일조건

'프로그래밍 > HTML' 카테고리의 다른 글

브라우저 '비밀번호 저장' 기능 비활성화  (0)	2020.09.21
갤러리 퍼블리싱한 html 자료입니다.  (0)	2018.12.07
NanumSquare 웹폰트 사용해보기  (0)	2018.04.20
폰트 사이즈 font sizes 에서 points, pixels, ems, percent 비교  (0)	2018.04.20
비동기 화면에서 뒤로가기 back 버튼 마우스를 클릭시 window.history.pushState 사용하기  (0)	2018.04.09
엑셀을 html 의 table 테이블 html 태그 제공 (https://codebeautify.org)  (0)	2017.11.06