기본 시스템 폰트가 아닌 일반 사용자 폰트로 웹을 표시해주는 것을 웹폰트를 적용한다라고 말합니다. 웹폰트는 @font-face를 이용해 클라이언트가 서버의 폰트를 다운받아 표시해줌으로써 클라이언트 PC에 해당 폰트가 없어도 웹사이트에서 제작자가 원하는 폰트로 사용자에게 보여줄 수 있습니다.
웹폰트 적용이 가능해진 이후로 디자이너들은 텍스트를 꾸미기 위해 이미지로 텍스트를 만드는 일이 크게 줄었습니다. 하지만 한글은 웹폰트를 적용하고도 알파벳처럼 깔끔하게 나오지 않아 아직까지 텍스트를 이미지로 만드는 경우가 꽤 있습니다. 원하는 폰트로 원하는대로 웹사이트에 표시를 할 수 있다고해서 단점이 없는것은 아닙니다. 클라이언트는 웹사이트의 텍스트를 읽어들이기위해 폰트파일을 다운로드 해야하고 그 사이동안은 텍스트가 보이지 않습니다. 이는 폰트파일의 용량이 크고 서버간의 통신 상태가 좋지 않다면 웹사이트를 사용자가 보는데 있어 많은 지연시간이 걸릴 수 있다는 얘기입니다.
하지만 이미지로 텍스트를 만드는 상황보다는 웹폰트를 사용하는 것이 결과물로 보나 개발과 유지보수 입장에서 보나 더 진보된 방법이라고 할 수 있습니다.
웹폰트를 적용하는 방법은 여러가지가 있습니다. 몇 가지를 소개해보겠습니다. 폰트는 나눔고딕(Nanum Gothic)을 예로 들겠습니다.
1. google font service를 이용한 CDN 링크방식
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
body, table, div, p {font-family:'Nanum Gothic';}
이 방식은 자신의 웹서버내에 폰트가 없는 경우 구글이 제공하는 font 서비스를 이용해 적용하는 방법입니다. 이 방법의 치명적인 단점은 로딩이 느리다는 것입니다. 웹사이트를 사용자가 보기 위해서 웹서버 요청 후 구글 font 서비스 서버에서 폰트파일을 읽어와야하기 때문에 이중으로 부담이 생기게 되고 곧 웹페이지를 여는데 시간이 걸리게 됩니다. 이 방법은 실제 운영하는 서비스에서는 그다지 권장하지 않습니다.
2. 자신의 서버에서 폰트를 불러오기
@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.woff')}
@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.eot')}
body, table, div, p {font-family:'Nanum Gothic';}
보시다시피 폰트 경로가 지정돼 있습니다. 이 방법은 1번의 방법과의 차이점이라면 구글 폰트에서 받아오던 폰트파일을 자신의 서버에서 직접 받아온다는 점입니다. 속도는 좀더 향상되지만 이 방법에도 문제가 있습니다. 브라우저마다 웹폰트를 사용하는 폰트파일 형식이 다릅니다. 따라서 woff와 eot 파일 2개를 동시에 불러오게 됩니다. 2개의 파일 중 하나는 사용하지 않는 불필요한 데이터입니다.
3. 2번의 방법을 개선한 방식
@font-face{
font-family:"Nanum Gothic";
src:url('/fonts/NanumGothic.eot');
src:url('/fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),
url('/fonts/NanumGothic.woff') format('woff'),
url('/fonts/NanumGothic.ttf') format('truetype');
url('/fonts/NanumGothic.svg#NanumGothic') format('svg')
src:local(※), url('/fonts/NanumGothic.woff') format('woff');
}
이 코드는 브라우저 환경에 따라 필요한 폰트만을 다운로드 받게 해줍니다. 브라우저 환경에 따라서 eot, woff, ttf 중 하나의 폰트파일을 받게되고 웹사이트에 적용하게 됩니다. 불필요한 파일을 받지 않음으로써 데이터의 부담은 줄고 모든 브라우저에 적용될 수 있는 최적의 코드입니다.