서버 웹폰트 적용 @font-face

log 2015. 5. 1. 11:28

• 파일 : NanumGothic.eot, NanumGothic.woff 
• 경로 : fonts/NanumGothic.eot, fonts/NanumGothic.woff 

예제 1

@font-face {    
	font-family:NanumGothic;
	font-weight:300;    
    src:url(fonts/nanumgothic.eot);    
    src:local('※'), url(fonts/nanumgothic.woff) format('woff');
}
    
@font-face {    
	font-family:NanumGothic;    
    font-weight:600;    
	src:url(fonts/nanumgothic-Bold.eot);    
    src:local('※'), url(fonts/nanumgothic-Bold.woff) format('woff');
}

body {font-family:나눔고딕, 'NanumGothic', ngwoff, ngeot;}　

예제 2 Not recommended

시스템 글꼴이 없는 경우 IE6~9 브라우저에서 eot형식외에 woff형식도 요청 하기 때문에 사용자는 불필요한 1MB미만의 파일을 추가로 내려받는다.

@font-face {
	font-family:ngwoff; 
    src:url('fonts/NanumGothic.woff');
}
@font-face {
	font-family:ngeot; 
    src:url('fonts/NanumGothic.eot');
}
body{font-family:나눔고딕, 'NanumGothic', ngwoff, ngeot;}

예제 3 방탄코드 Recommended ::

@font-face {    
	font-family:ng;    
    src:url('fonts/NanumGothic.eot');    
    src:local(※), url('fonts/NanumGothic.woff') format('woff')
}

body {font-family:"나눔고딕", 'NanumGothic', ng;}

방탄 개선 코드

• ng 글꼴 이름을 한번만 선언 후 eot, woff 형식 순차적으로 참조
• IE6~8 브라우저 에서는 eot 글꼴만 요청. 즉 eot 형식이 woff형식 보다 선참조 한다.
• IE9, Chrome, Safari, Firefox, Opera 브라우저는 woff형식만 요청. 
  @font-face 명세, eot글꼴에 대한 formet('embeded-opentype') 선언이 없기에 브라우저에서 eot글꼴을 내려받아야 하지만 내려받지 않는다.
• local(※) 값은 외부 자원을 참조 하기 이전에 시스템 글꼴을 참조 시킨다. 
  그러나 IE6~8 브라우저에서는 local() 값을 처리하지 못하므로 이코드에서는 woff글꼴을 추가로 요청하지 않도록 한다.
• local(※) 값의 ※ 의 기호는 사용자 시스템에 존재하지 않을 만한 글꼴을 임의로 지정한 것
  2byte의 특수문자를 사용한 이유는, Mac OS 에서 2byte의 문자열로 된 시스 템 글꼴 이름은 처리하지 않기 때문.
• format('woff') 값을 명시적으로 작성시, 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있음. 값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 한다.
  작성하지 않는 경우, 지원여부에 무관하게 모든 형식의 글꼴을 내려받는 것이 명세이다.
  글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해, 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성.
  IE7~8 브라우저에서는 이 코드를 해석하지 못하므로, woff글꼴을 추가로 요청하지 않도록 함 그러나 그것이 목적이 아님
• 한글이름이 있는 글꼴은 한글과 영문 모두 작성하는 것이 좋다. 
  나눔고딕 시스템 글꼴의 이름을 영문으로만 작성 했을 때 제대로 표시하지 못하는 브라우저가 있다.