나눔고딕,나눔바른고딕 웹폰트 적용하기

워드프레스로 홈페이지를 자주 만들기 때문에 나눔고딕웹폰트는 항상 필수적인 작업입니다.
워드프레스 테마가 모두 영문을 위주로 만들어져 있어서 그것을 한글홈페이지에 적용했을때 나타나는 어색함은 안습ㅜㅜ입니다. 
다행히 나눔고딕으로 대체를 하면 어느정도 해결이 됩니다. 
타이틀에 어색한 굴림체가 덩치만 크게 자리를 차지하고 있다면 홈페이지를 아무리 멋지게 만들어도 폼이 안살죠…
대신에 나눔고딕 볼드체로 바꿔보면 그나마 좀 낫습니다. 영문의 세련됨을 따라가긴 힘들지만요.
한글도 여러가지 무료 웹폰트가 나왔으면 좋겠다는 생각이 듭니다. 

 1. 나눔고딕 웹폰트를 사용하려면 웹폰트로 만들어진 폰트 파일을 서버에 올립니다.

아래링크를 클릭해서 다운로드 하시면 됩니다. 보통 웹폰트는 용량이 크면 안되기 때문에  ttf를 쓰지 않고 woff, eot 파일을 사용합니다. 

• woff : Web Open Font Format의 약자로 W3C권고 표준이고, 파이어폭스, 사파리, 오페라, 크롬, IE 9이상에서 지원
• eot : Embeded Open Type의 약자로, 표준형식은 아닙니다만, IE6~8버전에서는  eot만을 지원하기 때문에, woff, eot 모두 필요합니다.

2. CSS에서 다음과 같이 정의함으로 폰트를 적용할 수 있습니다.

@font-face { font-family: 'NanumBarunGothic';
src: url('/font/NanumBarunGothic.eot');
src: url('/font/NanumBarunGothic.eot') format('embedded-opentype'),
url('/font/NanumBarunGothic.woff') format('woff');}

그리고, 어떤 요소에 적용할 것인지 정해주면 됩니다. 
이렇게요.

H1 {font-family:'나눔고딕', NanumGothic;} 

‘나눔고딕’이라는 폰트를 먼저 적용해주면 사용자의 컴퓨터에 나눔고딕이 있을 경우 그것을 먼저 적용한다고 합니다. 그래서 더 빨리 웹페이지를 띄워 줄수 있게 되지요. 사용자의 컴퓨터에 나눔고딕이 없을 경우 서버에서 나눔고딕을 다운받아 적용시켜주기 때문에 약간의 시간이 필요하게 됩니다.

3. 나눔고딕 웹 폰트 다운로드

‘나눔바른고딕’이라는 폰트가 새롭게 추가되어서 나눔바른고딕 파일로 같이 올립니다. (updated 2014.2.5)

• 나눔고딕 eot 다운로드
• 나눔고딕 woff 다운로드
• 나눔바른고딕 eot 다운로드
• 나눔바른고딕 woff 다운로드
• 나눔바른고딕 볼드 eot 다운로드
• 나눔바른고딕 볼드 woff 다운로드