웹폰트를 이용한 웹사이트 제작하기

웹사이트 제작시 사용 할 수 있는 한글 폰트는 영문 폰트와는 달리 극히 제한되기 때문에 이쁜(?) 웹사이트를 만들기 위해 텍스트를 이미지로 삽입하고 합니다. 이렇게 텍스트를 이미지로 삽입 할 경우 부작용으로 일단 유지보수성이 떨어집니다. 한글자 수정하기 위해서 포토샵을 열고 파일을 수정한 뒤 다시 업로드하는 과정을 거쳐야하기 때문입니다. 그리고 검색엔진에 웹페이지 제대로 수집되지 않습니다. 텍스트가 이미지로 되있으면 검색봇이 내용을 읽을 수가 없기 때문입니다. 웹폰트를 이용하면 이런 점을 극복하면서 보기 좋은 웹사이트를 만들수 있습니다.

웹폰트를 이용하는 방법은 두가지가 있습니다. 첫째 직접 ttf 폰트를 eot와 woff 형식으로 변환하여 사용하는 방법과 구글 폰트와 같은 웹폰트를 호스팅해주는 서비스를 이용하는 방법이 있습니다.

직접 웹폰트 변환하여 사용하기

웹폰트에는 IE8 이하에서 사용되는 eot 형식과 IE9 이상이나 크롬과 같은 최신 브라우져에서 사용되는 woff 형식이 있습니다. woff 형식이 표준 웹폰트 형식이나 구형 브라우저 지원을 위해 두 형식 모두 사용 될 수 있게 css를 적용해야 합니다.

@font-face
{ 
	font-family: 'Nanum Gothic';
	src: url('NanumGothic.eot?') format('eot'), url('NanumGothic.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

font-family에는 css 파일에서 참조 될 폰트명을 적으시고 src url에는 웹폰트 파일의 url을 적으시면 됩니다. 'NanumGothic.eot?' 끝의 '?'는 오타가 아닙니다. 이렇게 적어 줘야만 IE8이하에서 웹폰트가 제대로 적용됩니다.

body
{
	font: normal 12px 'Nanum Gothic';
}

웹폰트를 사용 할 때는 @font-face에 적은 폰트명을 적어주면 됩니다.

구글 폰트를 이용하여 웹폰트 사용하기

https://www.google.com/fonts/earlyaccess

한글 폰트는 아직 정식 서비스에 포함되지 않고 earlyaccess(미리써보기?)에서 이용 할 수 있습니다.

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

웹폰트 적용 방법이 직접 웹폰트로 변환하여 사용하는 것보다 훨씬 간단합니다. 위에 한줄만 추가하면 됩니다. 단점으로는 현재 구글에서 제공하는 쓸만한 한글 폰트는 나눔글꼴 밖에 없습니다. (한나체라는 한글 폰트가 있기는 한데...) 다른 폰트를 이용 할려면 직접 변환해서 사용하던지 다른 (유료) 웹폰트 서비스를 이용해야합니다.

body
{
	font: normal 12px 'Nanum Gothic';
}

웹폰트 이용 방법은 직접 변환하여 사용하는 방법과 동일합니다. 폰트명은 earlyaccess 페이지에서 확인 가능합니다.