웹폰트 적용하기

1. @font-face 사용

EOT는 익스플로러 만 지원 합니다.

다른 브라우저(사파리, 오페라, 크롬, 파폭등)에서도 웹폰트가 보여질려면 WOFF, TTF 를 값이 넣어주어야 합니다.

@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; 

}

2. 모빌리스 웹폰트 사용

css파일 제일 상단에

 

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

 

모빌리스 제공 웹폰트

http://api.mobilis.co.kr/webfonts/

브라우저에 따라 폰트형식이 자동변환, 제공하는 폰트 용량이 적어, @font-face보다 간편합니다.