|웹폰트(네이버 맑은 고딕, 나눔고딕) 적용하기

1.기본적인 설치방법.

나눔고딕 혹은 맑은 고딕을 CSS의 최상단에서 정의한다

@font-face {font-family:'NanumGothic'; src: url('images/NanumGothic.eot');}  

@font-face {font-family:MalgunGothic; src:url(images/MalgunGothic.eot);}

상기는 익스플로어에서만 적용됨

크롬등 다 브라우저에도 적용시킬려면 다음과 같이 적용. 

@font-face {

    font-family:'NanumGothic';

    src: url('images/NanumGothic.eot');

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

         url('images/NanumGothic.woff') format('woff'),

         url('images/NanumGothic.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

}

body 나 기타 엘리먼트에 상기에서 정의한 font-family 를 적습니다.

body {
font-family:'맑은고딕' 'NanumGothic', 'MalgunGothic';

}

* 맑은고딕이라는 글꼴을 앞쪽에 선언하면 사용자 로컬 PC에서 맑은고딕 글꼴이 이미 설치되어 있는지 확인해 보고 이미 설치된 것으로 확인되면 woff, eot 포멧 글꼴은 아예 다운로드 하지 않고 시스템 글꼴로 등록된 맑은고딕을 사용해서 글꼴을 렌더링 합니다. 만약 맑은고딕 글꼴이 로컬 PC에 없는 경우 woff, eot 글꼴을 내려받기 해서 렌더링 합니다

* 웹폰트의 단점은 폰트 용량이 커서  로딩 속도가 늦어 질 수 있습니다.

2. 모빌리스 웹폰트를 이용하는 방법

웹폰트 로딩 문제를 해결할 수 있는 방법으로 모빌리스 웹폰트를 이용하는 방법이 있습니다.

css 파일에 다음 한즐 추가하면 브라우저별로 eot,woff,ttf로 변환되서 표협됩니다.

@import url(http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb); 

그리고 CSS에서 폰트를 지정 합니다. 기본적으로 모빌리스에서 나눔고딕의 영문이름이 NanumGothicWeb 그래서 CSS에서 폰트를 NanumGothicWeb으로 바꿔줍니다

* { font-family: 'NanumGothic', '나눔고딕','NanumGothicWeb', '맑은 고딕', 'Malgun Gothic', Dotum; }