웹 폰트란 웹 제작자가 의도한 글꼴을 사용자 브라우저 화면에 그대로 표시하기 위해 사용하는 웹용 글꼴을 말합니다. 로컬 PC에 미려한 글꼴이 없는 경우 브라우저는 웹 서버에서 즉시 제작자가 올려둔 글꼴을 내려받아 사용자에게 표시하는 것이죠. 예쁘지만 사용자도 모르는 사이에 웹 서버에 있는 글꼴을 내려받아야 하기 때문에 성능과 타협해야 합니다. 느린 웹 사이트에는 권장하지 않습니다.

Step 1

나눔고딕 웹 폰트를 사용하려면 일단 나눔고딕 글꼴이 여러분의 웹 서버에 올라가 있어야 합니다. 아래 제공하는 파일 가운데 woff 포멧과 eot 포멧을 내려받아 서버에 올려놓으세요. woff(Web Open Font Format) 포멧은 W3C 권고 표준이고 파이어폭스, 사파리, 오페라, 크롬, IE 9 브라우저가 지원하고 있지만 IE 6~8 브라우저가 지원하지 않습니다. 한편 IE 6~8 브라우저는 eot(Embeded Open Type) 포멧만을 지원하고 다른 브라우저들은 eot 포멧을 지원하지 않죠. 그래서 브라우저 호환성을 확보하려면 woff, eot 포멧이 모두 필요합니다. 

NanumGothic.woff(982KB)  

NanumGothic.eot(745KB)  

NanumGothic.ttf(2.23MB) // 이것도 웹 폰트로 사용은 할 수 있어요. 하지만 너무 무겁죠? 다운받지 마세요. 비추.

Step 2

CSS 파일에서 다음과 같이 @font-face 선언을 합니다. font-family 이름을 사용자 정의 하고 글꼴의 경로 url(...)을 바르게 작성합니다. 글꼴 경로는 CSS 문서가 글꼴 파일을 바라보는 관점에서 경로를 작성하면 됩니다. 아래는 CSS 파일과 글꼴이 같은 디렉토리에 있는 상황이라 간주하고 경로를 작성한 겁니다.

그 다음 어떤 요소에 글꼴을 적용할 것인지 선언해야 합니다. body, input, textarea, select, button 이런 요소에 두루 글꼴을 적용할께요. body에만 적용하면 table, input, textarea, select, button 요소에 글꼴 상속이 안되서 전부 줄줄이 적은겁니다. 

body, table, input, textarea, select, button{font-family:나눔고딕, NG, sans-serif}

NanumGothic 이라는 글꼴을 앞쪽에 선언하면 사용자 로컬 PC에서 NanumGothic 글꼴이 이미 설치되어 있는지 확인해 보고 이미 설치된 것으로 확인되면 woff, eot 포멧 글꼴은 아예 다운로드 하지 않고 시스템 글꼴로 등록된 NanumGothic을 사용해서 글꼴을 렌더링 합니다. 만약 NanumGothic 글꼴이 로컬 PC에 없는 경우 woff, eot 글꼴을 내려받기 해서 렌더링 합니다.

뭐 별거 없죠? ^^