@font-face로 한글 적용

먼저 브라우져에 따라서 지원되는 폰트의 포맷을 알아보겠습니다. 아래 표에서 보시는 것과 같이 모든 브라우져에서 동일하게 사용되는 포맷이 없기 때문에 각 브라우져에 필요한 폰트 포맷을 만들어야합니다.

	Webkit/Safari	Opera	IE	Mozilla/Firefox	Chrome
TrueType/OpenType TT (.ttf)	O *iPhone/iPhad iOS 4.2 이후 버젼	O		O	O
OpenType PS (.otf)	O	O		O	O
SVG	O *iPhone/iPad iOS 4.1 이전 버젼	O
Embedded OpenType (EOT)			O
WOFF			O *IE9 이후 버젼	O *Firefox 3.6 이후 버젼	O *Chrome 6 이후 버젼

폰트 포맷 생성

현재 제가 예제로 가지고 있는 폰트는 다음 폰트(파일 포맷 .ttf)입니다. 이 폰트 하나로 나머지 다른 포맷도 생성해보겠습니다. fontsquirrel이라는 사이트에서 이 모든 작업을 간편하게 도와줍니다.

다운로드를 하고 zip파일을 풀면 아래와 같은 파일들이 보입니다. 그 중에서 네모로 표시한 css와 폰트 파일만 사용하시면 됩니다.

css 파일 확인 및 수정

css파일을 열면 아래와 같은 코드가 보입니다. 아래의 파일에서 font-family를 확인합니다. 처음 다운 받았을 때는 font-family: ‘DaumRegular’입니다.

하지만 ‘워드프레스에 구글 웹폰트 로더와 @font-face로 한글 적용’ 포스트의 내용과 일치시키기 위하여 이름을 font-family 이름을 Daum_Regular로 변경하였습니다. 또한 파일 이름 stylesheet.css에서 쉽게 Daum_Regular.css로 변경하겠습니다.

stylesheet.css에서 쉽게 Daum_Regular.css로 변경하겠습니다.

 
@font-face {
    font-family: 'Daum_Regular';
    src: url('daum_regular-webfont.eot');
    src: url('daum_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('daum_regular-webfont.woff') format('woff'),
         url('daum_regular-webfont.ttf') format('truetype'),
         url('daum_regular-webfont.svg#DaumRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

css파일과 폰트 파일 FTP로 전송

css파일과 폰트 파일을 여러분의 파일 서버에 저장합니다. 그 이후의 과정은 ‘워드프레스에 구글 웹폰트 로더와 @font-face로 한글 적용’ 포스트의 폰트 적용방법 6번부터 참고하시면 됩니다.

브라우져마다 다른 폰트 포맷을 사용하기 때문에 웹사이트에서 해당 브라우져에서 지원하는 폰트를 적용해야하는 불편함이 있습니다. 하지만 다행히도 
fontsquirrel에서 쉽게 폰트 포맷과 css파일을 생성해주기 때문에 불편함이 많이 덜어진 것같네요.