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

기본 폰트를 지정해놓으면 그냥 쓸때보다 훨~씬 깔끔해 보인다.

설정해놓기 좋은 폰트 중에 무료폰트인 나눔고딕을 적용하는 방법을 알아보자.

 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. 나눔고딕 웹 폰트 다운로드

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

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