컴퓨터 화면에 보여지는 글꼴(폰트)은 기본적으로 내 컴퓨터 안에 폰트가 있어야 합니다.  이것을 시스템폰트라 하는데, 시스템 글꼴을 설정하면 내 컴퓨터에서만 보입니다.  그러나, 블로그나 사이트를 운영하는 경우, 내가 선택한 폰트를 다른 방문자도 볼 수 있도록 하려면 웹폰트 적용 을 해야 합니다.


예전에는 웹브라우저마다 지원하는 웹폰트가 서로 달라, ttf, , svg, eot, woff 등 4가지 웹폰트를 사용했습니다.  그러나, 요즘은 웹표준화가 진행되면서 eot  와 woff 정도면 웬만한 브라우저에서 지원합니다.  MS의 경우, 익스플로러8 까지는 eot 를 지원하고, 익스플로러9부터는 eot, woff 를 지원합니다.  


크롬, 파이어폭스, 사파리, 오페라 등은 예전부터 woff 를 지원합니다.  때문에, 블로그나 사이트에서 쓰는 웹폰트 형식은 eot 와 woff 2가지만 적용하면 거의 모든 브라우저에서 볼 수 있습니다.



모든 방문자가 볼 수 있는 웹폰트를 적용하는 방법에는 몇 가지가 있습니다.  아래에서는 나눔고딕 웹폰트 적용으로 설명하겠습니다.




구글 웹폰트 서비스를 활용한 웹폰트 적용


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


css에 위 구문을 삽입하고, 나눔고딕이 웹폰트로 보이게 하고 싶은 부분의 폰트패밀리 맨 앞에 나눔고딕을 추가하면 됩니다.


블로그, 사이트 등 자신이 운영하는 서버가 없는 경우, 구글이 제공하는 웹폰트 서비스를 활용하는 것입니다.  블로그에 방문자가 들어 오면 구글 서버에서 폰트를 읽어 와야 하기 때문에 페이지 로딩에 약간의 지연이 생깁니다.  블로그에서는 무료이기 때문에 많이 이용하지만, 사업목적으로 쓰는 사이트에서는 로딩 딜레이가 영업에 지장을 줄 수 있기 때문에 권장하지 않습니다.




자신의 서버를 활용한 웹폰트 적용


@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.woff')}

@font-face{font-family:'Nanum Gothic'; src:url('/fonts/NanumGothic.eot')}


css에 구문을 추가하고, 나눔고딕으로 보이게 하고 싶은 부분에 적용되는 폰트 패밀리 맨 앞에 나눔고딕을 추가합니다.


이 방법은 자신의 서버에 폰트를 올려 놓고 바로 받아 띄울 수 있기 때문에 로딩속도는 구글 서버에서 불러 오는 방법보단 빠릅니다.  그러나, woff 와 eot 를 동시에 불러오기 때문에 불필요한 로딩이 생깁니다.




최적화된 웹폰트 적용


@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, svg 를 선택적으로 로딩합니다.  불필요한 웹폰트 형식을 배제하고 필요한 것만 불러 오기 때문에 모든 브라우저에 최적화된 웹폰트 적용방법입니다.


이상 블로그에 나눔고딕 웹폰트 적용 하는 방법 3가지에 대해 알아 보았습니다.



저작자 표시 비영리 변경 금지
신고
Posted by 지구호 승객 여런분 안녕하세요? 인코드


티스토리 툴바