웹에 나눔글꼴 적용하기

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

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';}