망분리된 프로젝트에서 웹폰트 적용시

CSS

by 김일국 2018. 2. 28. 10:52

보안때문에 망분리된 사무실에서 웹프로젝트를 수행하게 되면, 여러가지 에로점이 발생하게 됩니다.

그중 하나가, CDN(Contents Delivery Network)를 사용하는 사항인데요.
오늘은 그 중에 나눔고딕웹폰트를 적용한 사례를 들어 보입니다.

아래는 웹폰트를 적용하는 샘플이고, css style에서 상대경로로 font 폴더에 NanumGothic 폰트를 로딩하는 소스 입니다.

NanumGothic.eot

아래 css에서 @font-face는 사용자 PC에 설치되어 있지 않는 글꼴을 서버에서 내려받아서 사용할 수 있게 하는 지시어 입니다.

NanumGothic.woff

참고로 위 eot(IE8이하에서 적용) : Embeded Open Type 약어, woff(IE9이상+대부분브라우저에서 지원) : Web Open Font Format 약어 입니다.

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
@font-face{
font-family:ng;
src:url(./font/NanumGothic.eot);
src:local(※), url(./font/NanumGothic.woff) format('woff')
}
body,table,input,textarea,select,button,p{font-family:NanumGothic,'나눔고딕',ng,sans-serif}
</style>
<title>로컬웹폰트</title>
</head>
<body>
<p>
나눔고딕 로컬 폰트
</p>
</body>
</html>

'CSS' 카테고리의 다른 글

웹폰트 적용하기 (0)	2015.07.30
스프라이트 이미지(통이미지)로 홈페이지 메뉴 구성하기 (0)	2014.12.16
홈페이지 색상적용시 다른사이트 색상값 확인할때 사용가능한 크롬플러그인 입니다. (0)	2014.06.13
웹표준 준수사항 몇가지 (0)	2011.08.11
css로 이미지 리사이즈하기 (0)	2010.10.04