방명록

나눔고딕 웹폰트 적용과 굵기 지정하기

포스팅에서는 나눔고딕을 적용하고 굵기를 다르게 지정하는 내용에 대해서 알아보겠습니다.

자신의 홈페이지나 블로그에 기존 굴림체나 돋움체를 사용하면 글자가 많이 거칩니다. 그래서 요즘 대세가 된 폰트가 있는 데 이것이 네이버에서 만든 무료 서체 나눔폰트입니다.

문제는 웹페이지의 경우 사용된 서체는 기본적으로 홈페이지를 보는 사용자 자신의 컴퓨터에도 서체가 깔렸어야 제대로 표현된다는 한계가 있습니다. 굴림체의 경우 한글 윈도우 설치 시 기본으로 모두 깔리기 때문에 문제가 없지만 나눔 서체의 경우는 설치한 사람과 설치하지 않은 사람들로 나뉩니다. 문제는 설치하지 않은 사람입니다.


나눔고딕웹폰트 적용굴림 폰트 적용 페이지


이러한 문제점을 해결하고자 나온 것이 바로 웹폰트입니다. 현재 나눔고딕 웹폰트를 적용하기 위해서 많이 사용하는 것이 구글 웹폰트입니다.


나눔고딕 웹폰트 적용나눔고딕 웹폰트 적용 페이지


간단하게 이야기하면 구글 서버에 설정된 나눔고딕체를 자신의 웹페이지나 블로그에 연결해주는 방법입니다. 그러면 사용자 컴퓨터에 나눔고딕이 설치되지 않아도 나눔고딕 웹폰트를 불러와 볼 수 있게 되는 겁니다.

1. 나눔고딕 웹폰트 구글 웹폰트 이용하기
자신의 CSS 에 아래 내용을 삽입한다.

@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');
body { font-family: 'Nanum Gothic'; }   /* 폰트 패밀리에 나눔고딕을 추가한다 */

단점이라면 아무래도 사용자 컴퓨터 서체를 불러오는 것이 아니라 웹에서 불러오는 것이므로 로딩 속도에 약간의 영향을 끼칩니다.

2. 나눔고딕 웹폰트 자신의 서버에 올려 이용하기
위 방법은 구글에서 불러오는 내용이고 자신의 서버에 웹 폰트를 올려서 사용할 수도 있습니다. 자신의 서버에 웹폰트를 올립니다. 그리고 아래 내용을 삽입하면 됩니다.

나눔웹폰트.zip  <-클릭

@font-face {font-family:'나눔고딕'; src:url('./폰트폴더 이름/NanumGothic.eot')};
@font-face {font-family:'나눔고딕'; src:url('./폰트폴더 이름/NanumGothic.woff')};

body{font-family:'나눔고딕';}     /* 폰트 패밀리에 나눔고딕을 추가한다. */
 div{font-family:'나눔고딕';}    /*기타 div 에 적용되는 폰트*/

위 밑줄 친 내용을 추가하고 사용할 font-family에 나눔고딕을 적용하면 됩니다.

소스 텍스트.txt <-클릭

3. 접속자 로컬 나눔고딕 폰트 이용하기
마지막은 제가 사용하는 방법입니다. 아무래도 로딩속도에 영향을 줄이기 위해서 폰트 패밀리에만 적용하는 방법입니다.

나눔고딕이 없으면 맑은고딕, 맑은고딕이 없으면 돋움, 돋움이 없으면 굴림. 이런 식으로 계속 나열하는 겁니다. 그러면 사이트 접속자 컴퓨터에 나눔고딕 서체가 없으면 맑은고딕을 찾습니다. 맑은 고딕이 없으면 돋움을 찾습니다. 돋움이 없으면 굴림 서체를 뿌려줍니다.

body{
        font-family:나눔고딕, 맑은고딕,Dotum, 굴림;
}

이 방법은 단순하게 서체가 안 깔렸으면 차순위 폰트를 찾아 표시해주는 내용입니다.

4. 나눔고딕 굵기 설정하기
나눔고딕 폰트는 기본적으로 Light, Regular, Bold, Extra Bold의 굵기를 내장하고 있습니다.
포토샵에서는 위 옵션이 나오지만, CSS에서는 CSS 설정 값을 대입시키면 됩니다.

CSS 설정 값: normal, lighter, bold, bolder, 100, 200 ~ 900

위 값이 모두 적용되는 것은 아니니 하나씩 테스트해보면 됩니다.

추가하고자 하는 곳에 다음과 같이 입력하면 됩니다.

font-weight: 설정 값;

나눔글꼴 다운받기