[ CSS ] @font-face

@font-face 이라는 규칙은 CSS 3에서 새로 추가된 것이다.

html 문서에서 웹폰트를 적용할 때 사용하는 방법으로,
웹 서버에 저장되어 있는 글꼴을 임시로 내려받아 화면에 표시해 주는 방식이다.

웹폰트는 저작권과 밀접하게 관련이 있기 때문에, 사용함에 있어서 신중을 가해야 한다.

이 규칙은 원래 MS가 IE 6~8 브라우저에서 사용하던 것을 W3C에 제안하면서 표준으로 채택되었다.

기본적인 작성 방법은 아래와 같다.

<style type="text/css"> 
@font-face { 
	font-family: myFirstFont; 
	src: url(NanumGothic.woff); 
} 

p { font-family: myFirstFont; } 
</style> 

font-family 이라는 속성을 사용하여, 폰트의 이름을 설정해준 후, 그 폰트 파일이 위치한 주소(url)를 넣어준다.
폰트의 이름은, 자신이 원하는 이름으로 입력하면 된다.

폰트의 이름이 맨 첫줄에 와야 한다.
주소값으로 대문자가 있을 경우, IE에서는 엉뚱한 결과가 나올 수 있다.

표준으로 권장되는 폰트 파일은 "woff" 이지만,
주요 브라우저별로 적용 가능한 파일의 종류는 아래와 같다.

ttf (TrueType Font) otf (OpenType Font)	9 버전부터 가능	3.5 버전부터 가능	4.0 버전부터 가능	10 버전부터 가능	3.1 버전부터 가능
eot (Embedded Open Type)	6 버전부터 가능	사용 불가	사용 불가	사용 불가	사용 불가
woff (Web Open Font Format)	9 버전부터 가능	3.6 버전부터 가능	6.0 버전부터 가능	11 버전부터 가능	5.1 버전부터 가능
svg (Scalable Vector Graphic)	사용 불가	사용 불가	4.0 버전부터 가능	9.0 버전부터 가능	3.2 버전부터 가능

ttf & otf 파일은 압축되지 않은 타입으로, 대부분 용량이 크기 때문에, 웹폰트로 사용하기에는 무리가 있다.
또한 위의 표에서도 알 수 있듯이, 브라우저나 그 버전마다 사용 가능한 파일의 종류가 다르기 때문에,
직접 사용하기 전에 알아둬야 할 사항들이 있다.

---

@font-face 규칙을 실제로 사용하려면 다음과 같은 몇 가지 문제를 확실히 알고 있어야 한다.

src:url(‘http://www.blahblahblah.com/font/NanumGothic.woff’);

위와 같이 크로스 도메인일 경우 즉,
다른 사이트에 있는 폰트를 불러오기 위해서, (http://...)와 같은 전체 경로를 지정할 경우
파이어폭스는 파일을 훔쳐오는 것으로 것으로 간주하여 적용되지 않는다.
표준에 따르면 웹 폰트는 크로스 도메인을 지원하지 않는다.
단, 글꼴 출처가 되는 웹 사이트에서 크로스 도메인을 허용하는 경우에는 적용이 가능하다.

"woff" 파일과 "eot" 파일을 모두 적용할 생각으로, 아래와 같이, @font-face 규칙을 두 번 사용할 경우,
IE 6~9 브라우저는 "woff" 파일과 "eot" 파일을 둘다 내려받게 되어,
방문자는 불필요한 파일까지 내려받는 샘이 되버린다.

@font-face{ font-family: myFirstFont; src:url(NanumGothic.woff) }
@font-face{ font-family: myFirstFont; src:url(NanumGothic.eot) }

또한 @media 구문 안쪽에서, @font-face 규칙을 사용하는 경우, IE 9 브라우저는 글꼴을 가져오지 않는다.

---

아래는, "Paul Irish" 이라는 사람이 제안한 방탄 코드를 사용한 작성법과 관련된 설명이다.

<style type="text/css"> 
@font-face { 
 /* 1 */	font-family: myFirstFont; 
 /* 2 */	src:url(NanumGothic.eot); 
 /* 3 */	src:local(※), url(NanumGothic.woff) format('woff'); 
		}

 /* 4 */	div { font-family: 나눔고딕, NanumGothic, myFirstFont; } 
</style> 

1. myFirstFont 이라는 글꼴 이름을 한 번만 선언한 다음, eot 파일과 woff 파일을 차례대로 읽어오게 한다.
   웹폰트 이름은 컴퓨터에 설치된 글꼴 이름과 다르게 처리하는 것이 좋다.
   방문자의 컴퓨터에 이미 나눔고딕이 있으면, 웹 폰트를 참조하지 않도록 하기 위함이다.
   "myFirstFont"가 아닌, 그냥 "NanumGothic" 이라고 하면
   이게 컴퓨터에 있는 글꼴인지 웹에 있는 글꼴인지 구분이 되지 않기 때문이다.

   
   

2. eot 파일이 woff 파일보다 앞에 와야 한다.

   
   

3. local() 값은 원래, 웹폰트를 가져오기 전에, 컴퓨터에서 글꼴을 먼저 찾아보게 하는 것인데,
   이 코드에서는, IE 6~8 브라우저가 local() 값을 처리하지 못하는 특징을 이용하여, "woff" 글꼴을 추가로 요청하지 않도록 해 준다.

   
   

   local() 값의 괄호 안에 들어간 ※ 기호는,
   방문자의 컴퓨터에 존재하지 않을만한 글꼴 이름을 아무거나 지정한 것이다.
   굳이 2 byte 짜리 특수문자를 사용한 이유는,
   Mac 컴퓨터는 컴퓨터의 글꼴 이름이 모두 1 바이트로 되어 있기 때문에, 2 바이트 이름을 사용해서 아예 제외하도록 한 것이다.
   local 값은 비워두면 안되기 때문에 뭐라도 반드시 넣어야 하고,
   여기서는 로컬에 전혀 없을만한 글꼴 이름을 넣은 것이다.

   
   

   format('woff') 값으로, 파일 형식이 woff 이라고 지정해주면,
   이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있다.
   지정해주지 않으면, 글꼴 적용 여부와 상관없이, 모든 형식의 글꼴을 내려받는 꼴이 된다.
   값은 반드시 큰따옴표나 작은따옴표로 감싸주어야 한다.

   
   

   eot 파일에 대해서도 format('eot')를 지정해버리면, 이 format 이라는 값은 IE 6~8 브라우저에서 지원하지 않기 때문에,
   IE 6~8 브라우저에서, src 속성과 값을 아예 무시하고서 eot 글꼴을 내려 받지 않게 되버린다.

   
   

4. 방문자의 컴퓨터에 '나눔 고딕'이 설치되어 있으면, 그 파일을 먼저 사용하고,
   없다면 여기서 지정해준 웹폰트를 사용하게 된다.
   한글 이름이 있는 글꼴은 한글과 영문 모두 작성하는 것이 좋다.
   그 이유는, 영문으로만 작성했을 때 제대로 표시하지 못하는 브라우저가 있기 때문이다.

---

svg 파일에 대해서는, 그 파일 자체가 뭔지 모르기땜시 찾아보지 않았다.
꽤 쓸만한 파일이긴 한가 보던데, 그것까지 파고들려면 머리아프다... ㅡ.ㅡ;;

그외 참고할만한 사이트들은 다음과 같다.

⪢ 웹폰트, 크로스 브라우징 - EOT, WOFF, TTF
⪢ 웹 폰트 적용 방법론 : 그 어려운 설명과 간단한 해결책
⪢ 티스토리 블로그에 웹폰트 적용하기

⪢ Common fonts to all versions of Windows & Mac equivalents

⪢ CSS Fonts Module Level 3 (W3C)

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*