웹폰트를 사용하는 올바른 방법(나눔고딕폰트,티스토리에서 사용하는 방법)

웹폰트를 사용하려면 @font-face 라는것을 사용하는데 관심이 있는분이면 다 아실겁니다. 
아래의 글은 나눔고딕과 티스토리를 예를들어 작성했습니다.
@font-face 는 css2에 지정이 되어있지만 지원여부때문에 많이들 사용안한것 같습니다. 참고로 @font-face 는 스타일시트에서 지정하면 ie 는 무시합니다. 사용법은 아래에 자세히 설명하겠습니다.

그런데 웹폰트로 검색을 하면 css 에서 지정하는것만 나오고 관리(?) 하는 것은 안나옵니다.
관리라고 하니 좀 그런데요. 처리하는 부분이라고 하겠습니다.

웹폰트를 사용하려면 브라우져에 대해서 좀 짚고 넘어가야 합니다.
IE 는 .eot 파일을 지원하고 , 나머지 브라우져들은 .ttf  파일을 지원합니다.
고로 이것에 맞쳐 크로스브라우징 환경에 알맞게 처리를 해야 한다는 겁니다. 자세히 이야기하면 IE는 .eot 파일이든, .ttf 파일이든 다운로드하거나, 사파리나 파이어폭스 경우는 @font-face 처리를 할때, 우리는 .ttf 파일만 지원하니 요넘만 다운로드 받자.... 라고 생각하지 않는다는 겁니다.
즉 두개의 폰트파일 모두를 다운로드 한다는 거죠. 

최신브라우져들이 @font-face 을 어느정도 지원하는지 한번 보시기 바랍니다.

	IE 4	사파리 3.1	파이어폭스 3.5	오페라 10
형식	EOT	트루타입/오픈타입	트루타입/오픈타입	트루타입/오픈타입
프리로드 동작	일반 폰트	글자 비가시화	일반 폰트	일반 폰트
미지원형식/내려받기	O / 형식 힌트사용	X / .eot 확장자 무시	X / 조건부 주석 사용	X

스타일 지정하는것도 해야하지만 다른 브라우져들이 상관없는 폰트 파일을 다운로드 받지 않게 해야 한다는겁니다.
일반적으로 @font-face 를 지정하면 방문자가 웹페이지를 방문하는 순간 폰트 파일을 다운로드 합니다.

정확히 말하면 유저컴퓨터 해당 폰트가 설치되어 있다면 다운로드 받지 않고 해당 폰트로 보여주고, 만약 해당 폰트가 설치되어 있지 않다면 해당 폰트를 다운로드 받는다는 말입니다.

우리나라는 나눔고딕이라는 오픈소스 글꼴이 있습니다. 참 고마운 일이죠. 폰트 모양도 이쁘고, 누구나 사용할 수 있게 허락했습니다.
나눔고딕 =>  http://hangeul.naver.com/index.nhn

폰트는 .ttf 파일과 .eot 파일만 있으면 됩니다.
윈도우에서 나눔고딕 파일을 컴퓨터에 설치하는 방법은 단순이 제어판 - 글꼴폴더안에 넣기만 하면 설치가 됩니다.

@font-face 를 사용하는 방법.(css 에서 지정하는 방법)

여기서는 티스토리를 이용하니 티스토리를 예를들겠습니다. 다른곳도 비슷하니 응용하시면 될거에요.
사용하려면 폰트 파일이 있어야겠지만 단순이 .eot 파일과 .ttf 파일을 준비해야 합니다.

NanumGothic.ttf

NanumGothic.eot

 

폰트 파일이 준비되었다면 스킨 편집에서 파일업로드를 통해 폰트 파일을 업로드 합니다.

 
 그다음 css 편집창 맨위에 다음과 같이 지정을 해줍니다. 

@font-face { 
font-family:ngttf; 
src:url(images/NanumGothic.ttf); 
}
@font-face { 
font-family:ngeot; 
src:url(images/NanumGothic.eot); 
}

맨위에 이렇게 지정을 하면 다음부터는 폰트를 지정할때 아래와 같이 합니다.

body { 
font-family:NanumGothic,"나눔고딕",ngttf,ngeot,dotum,"돋음",sans-serif;  
}

여기서 잠깐.
위에보면 NanumGhothic 를 먼저 지정합니다.
이건 유저컴에 NanumGhothic 이 설치되어있다면 해당폰트를 다운로드 받지 않고 나눔고딕으로 페이지에 보여집니다.

그다음 한글로 "나눔고딕" 이라고 지정했습니다.
한글은 "" 를 사용해서 지정을 해줘야 합니다.
브라우져중 한글로 지정을 해야 입력되는것이 있으므로 한글로 지정을 꼭 해줘야 합니다.
여기까지는 유저컴에 나눔고딕 글꼴이 설치되어있다면 다운로드 받지 않고 해당글꼴로 페이지를 보여줍니다.

만약 없다면 ngttf 를 사용합니다. 웹표준 브라우져들이 해당이 되겟죠.

그다음은 IE ,
유저컴에 나눔고딕이 설치되어있지않다면 앞부분을 무시하고 ngeot 라는 글꼴을 인식해 업로드한 파일을 다운로드해서 나눔고딕으로 보여줍니다.

그다음은 예방차원.

여기까지는 일반적입니다. 웹폰트를 검색을 하면 이런류의 글들이 나옵니다.
하지만 두가지 선언을 함으로써 브라우져들이 사용하지도 않는 폰트 파일을 다운로드 하는 문제점이 있습니다
해서 저는 html 에서 지정하는 방법을 권장합니다.
방법과 이유는 아래를 계속해서 읽어주세요. 

폰트파일도 파일입니다. 어느정도의 용량이 있겠죠.
나눔고딕.ttf 의 경우 2.23MB , 나눔고딕.eot 의 경우 845KB 의 용량이 있습니다. 하나만 해도 이정도인데 몇개의 폰트파일을 지정한다면 로딩이 꽤 걸리겠죠^^;

해당페이지를 방문했을때 어는 브라우져든 저 두파일을 다운로드 해서 페이지를 보여지게 할 필요는 없겠죠.
또 사파리 브라우져는 폰트 파일을 다운로드 받아서 페이지에 해당 폰트로 보여지기까지 폰트를 보여주지 않고 기다립니다.

그럼 방문자들은 해당페이지에서 멈춤이 진행이 될테고, 그걸 좋아하는 사람은 없겠죠...
해당 해당 부분을 주석처리를 해줘야 합니다.

HTML 에서 지정하기.

방법은 두가지가 있습니다. html 에서 처리하는겁니다.
형식을 지정하는 방법은 아래와 같습니다. format 을 지정하는 겁니다. 해당부분을 눈여겨 보세요.

@font-face {
    font-family:ngttf;
    src:url(images/NanumGothic.ttf); 
    format("truetype");
}

src 속성뒤에 형식을 지정함으로 해당 부라우져만 인식하게 하는 방법이 있지만 개인적으로 이것보다는 주석으로 처리하는것이 더 확실하다고 생각합니다.
스타일시트를 작성한후 링크로 처리하는 방법과 html 에서 그냥 지정하는겁니다.
웹표준으로 보면 스타일 시트를 링크로 처리하는 방법이 올다고 합니다.
방법은 아래와 같습니다.

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="./images/해당스타일시트.css" />
<[end if]-->

그런데 아무리 웹표준쪽으로 봐도 단 몇줄을 스타일시트로 만들어서 지정하는것이 무리가 있어 보입니다. 그냥 html 에서 지정하는 방법은 아래와 같습니다.

<!--[if IE]> 
<style type="text/css" media="screen, print">
@font-face {  
font-family:ngeot;  
src:url(images/NanumGothic.eot);  
} 
</style>
<[end if]-->

이렇게 하면 IE 는 .eot 파일을 다운로드하고 보여줍니다. 다른 브라우져들은 어떨까요?
네 맞습니다.
.eot 파일을 다운로드 하지 않습니다.

여기까지 보셨다면 이제 다 아셨을겁니다. 종합해보면 이렇습니다.
IE만 지원하는 .eot 파일은 html 에서 IE 전용주석으로 처리하고 , 웹표준을 준수하는 비IE 브라우져들은 스타일시트에서 저정하면 됩니다. 

즉 아래처럼 하면 됩니다.

<!--[if IE]> 
<style type="text/css" media="screen, print">
@font-face {  
font-family:ngeot;  
src:url(images/NanumGothic.eot);  
} 
</style>
<[end if]-->

@font-face { 
font-family:ngttf; 
src:url(images/NanumGothic.ttf); 
}

지정하는 방법은 아래와 같습니다.

body { 
font-family:NanumGothic,"나눔고딕",ngttf,ngeot,dotum,"돋음",sans-serif;  
}

이렇게 하는 이유는 원하는 브라우져만 해당파일을 다운로드 받게끔함으로써 사이트가 향상됩니다.