나눔고딕 웹폰트 적용 소스 (크로스 브라우징 문제 해결하기)

1. API를 이용하지 않는 소스 (IE 계열의 브라우저에서 불규칙적으로 작동 안할때가 있음)

@font-face {
font-family: "fontng";
src: url('/font/NanumGothic.eot');
src: local('?')
, url('/font/NanumGothic.eot?#iefix') format('embedded-opentype')
, url('/font/NanumGothic.ttf') format('truetype')
, url('/font/NanumGothic.woff') format('woff');
font-weight: normal;
font-style: normal;

.fng{font-family:'나눔고딕', NanumGothic, 'fontng';}

 

로컬에 나눔고딕 폰트가 설치되어 있으면 로컬 폰트를 선순위로 적용.

※ 크롬 이외의 브라우저에서는 로컬에 해당 폰트가 설치되어 있더라도 서버상의 웹폰트를 일단 로딩하기 때문에

    속도 저하를 피할 수 없다는 글을 몇번 본적 있음.(직접 테스트해본 사항은 아님)

 

2. 구글 API를 이용한 소스 ( IE 계열(6~9) 및 크롬/파이어폭스 등 모두 정상 작동 확인)

먼저 아래 구문을 CSS 파일에 import

@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");

.fng{font-family:'나눔고딕', NanumGothic, 'Nanum Gothic';}

 

 

 ※ 그외 나눔 계열 나머지 폰트 적용 소스

@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css");
@import url("http://fonts.googleapis.com/earlyaccess/nanumpenscript.css");

.fng{font-family:'나눔고딕', NanumGothic, 'fontng', 'Nanum Gothic';}
.fnb{font-family:'Nanum Brush Script';}
.fng{font-family:'Nanum Gothic Coding';}
.fng{font-family:'나눔명조', NanumMyeongjo, 'fontnm', 'Nanum Myeongjo';}
.fng{font-family:'나눔펜', NanumPen, 'fontnp', 'Nanum Pen Script';}