@font-face ?

@font-face : 웹페이지의 텍스트에 온라인 폰트를 사용할 수 있다.

@font-face 지시어는 웹 브라우저에게 서체 이름과 다운받을 위치를 알려준다.

font type (폰트 파일 유형)

• EOT(Embedded Open Type): IE에서만 통용된다. 일반 폰트 파일을 EOT로 변환하려면 특별한 도구가 필요하다.

• TrueType과 OpenType: 컴퓨터의 Fonts폴더를 열어보면 .ttf(TrueType format)와 .otf(OpenType format) 서체 파일들이 보인다. 대개 컴퓨터 서체 파일로 널리 사용되는 파일 형식으로 웹 페이지 뿐만 아니라, 워드 프로세싱이나 전자출판에도 사용할 수 있다. 이런 유형의 서체 파일은 대부분의 브라우저가 지원하며 IE9를 포함한 최신 버전의 IE, 크롬, 파이어폭스, 사파리, 오페라, IOS 사파리(4.2+), 그리고 블랙베리 브라우저 등이 여기에 해당한다.

• WOFF(Web Open Font Format): 이 파일은 웹을 주된 대상으로 설계된 파일 형식이다. WOFF 서체는 기본적으로 .ttf나 .otf 서체를 압축한 것이기 때문에 일반적으로 파일 크기가 작아서, 다른 서체보다 빠르게 다운로드된다. WOFF 파일은 다양한 브라우저 제조사의 지지도 받고 있어서 IE9를 비록한 모던 브라우저와 IOS 사파리(5+)에서 지원하고 있다. 하지만 안드로이드 진영에서 이 파일을 지원하지 않고 있어서 안드로이드 기기나 IE8 사용자는 서체를 다운받거나 표시할 수 없다.

• SVG(Scalable Vector Graphic): 이 파일은 사실 서체 파일은 아니다. SVG는 벡터 그래픽(확대해도 품질이 유지되는 이미지를 만드는 기술)을 위한 파일이다. SVG 폰트를 지원하는 브라우저는 매우 제한적으로 IE, FF는 지원하지 않는다. SVG의 또 한가지 문제는 파일 크기가 TrueType의 거의 두 배, WOFF 파일의 거의 세 배에 달한다는 것이다. SVG를 사용해 얻을 수 있는 가장 큰 장점은, IOS 사파리 4.1 이전 버전에서 인식하는 유일한 웹 폰트 타입이라는 것이다.

기본 구문

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

웹 폰트 간단 사용 예제

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

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

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

예제

@font-face {
	font-family: 'NotoSansKR';
	font-style: normal;
	font-weight: 100;
	src:url('../font/NotoSansKR-Thin.eot');
	src:local('Noto Sans KR Thin'),local('Noto Sans Thin'), local('NotoSansKR-Thin'),
		url('../font/NotoSansKR-Thin.eot?#iefix') format('embedded-opentype'),
		url('../font/NotoSansKR-Thin.woff2') format('woff2'),
		url('../font/NotoSansKR-Thin.woff') format('woff');
}

굵은 서체나 이탤릭 서체를 추가하는 방법(Bold, Italic)

bold나 Italic체를 추가하기 위해서는 font-weight와 font-style 속성을 추가해주어야 한다.

@font-face{ 
	font-family:'NanumGothic';
	src:url('fonts/NanumGothicItalic.eot'); 
	src:url('fonts/NanumGothicItalic.eot?#iefix') 
	format(‘embedded-opentype’), 
	url('fonts/NanumGothicItalic.woff') format(‘woff’), 
	url('fonts/NanumGothicItalic.ttf') format('truetype'); 
	font-weight: bold; 
	font-style: italic; 
}