웹 폰트 적용 방법 (나눔 고딕 등등..)

나눔고딕 혹은 맑은 고딕을 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 글꼴을 내려받기 해서 렌더링 합니다

 

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