블로그 꾸미기, 나눔 고딕 폰트 설치

블로그 꾸미기 제 2탄!!

그동안 돋움체만 써서 질렸던 분들을 위한 나눔고딕 설치 방법입니다.

네이버 나눔고딕이란?

네이버에서 제공하고 무료로 배포하는 폰트로써 다양하고 아름다운 한글을 함께 사용할 수 있도록 하기 위해 제작된 폰트라고 합니다.

네이버 나눔고딕설치방법

1. 우선 폰트를 적용하려면 폰트 파일이 있어야 겠죠? 나눔고딕 홈페이지에 가시면 폰트 설치 패키지를 받을 수 있습니다.

아래 다운로드를 클릭하면 나눔글꼴 패키지를 PC에 설치 할 수 있습니다.

  

2. 하지만 블로그에 적용하기 위해선 위에 링크해 놓은 패키지로는 설정할 수 없더라구요. ㅠㅠ;

그래서 다양한 검색 경로를 통해 방법을 찾아봤더니 확장자가 eot가 붙은 파일만 웹 블로그에 적용 할수 있습니다.

eot 확장자 파일이란? End Of Transmission character 의 약자로 블로그나 웹문서에서 사용하는 폰트

3. 제가 찾은 나눔고딕의 eot 파일을 아래 첨부하니 다운로드 하시면 됩니다.

NanumGothic.eot

 

4. 준비하는 과정이 너무 길었네요. ^^; 이제 본격적으로 나눔고딕을 블로그에 적용 해 보도록 하겠습니다.

블로그 관리 페이지로 들어가서 HTML/CSS 편집을 클릭합니다.

5. 다운로드한 폰트를 적용하기 위해서는 파일을 업로드 해야 합니다. 파일업로드를 선택하고 추가 버튼을 눌러서 조금전 다운로드한 폰트를 업로드 합니다.

6. 나눔폰트가 정상적으로 업로드가 되었는지 확인을 합니다. 파일목록의 스크롤을 쭉 내리다보면 아래 스샷처럼 확인을 할 수가 있습니다.

7. 자 이제 거의 다왔네요. 이제 실제 적용해야 할 단계입니다. 적용은 style.css 편집창에서 나눔고딕 폰트 설정을 하면 됩니다.

(편집창이 너무 작을 경우 아래 그림처렴 화살표를 클릭 하면 편집창이 크게 펼쳐지는 것을 볼수 있습니다.)

일부 스킨에 따라 css 소스가 다르게 보일 수 있습니다.

저 같은 경우는 font-family 부분에 나눔고딕을 추가해 주웠습다.

7. @charset 윗 부분에 나눔고딕 설정 방법을 입력합니다. 나중에 확인하거나 수정하기 좋게 주석처리하는것이 좋겠죠? ^^

폰트 사이즈는 개인적인 취향이기 때문에 알아서 설정 하시기 바랍니다.

/* 나눔 고딕 폰트 설정 */ @font-face {font-family:나눔고딕; src:url(images/NanumGothic.eot)}; body{font-family:나눔고딕; font-size: 14px;} div{font-family:나눔고딕; font-size: 14px;}

아래 첨부파일 다운로드하시면 쉽게 적용 할 수 있습니다.

나눔고딕_폰트_적용하기 소스.txt

 

8. 이제 블로그 글을 작성하시면 됩니다.

블로그 글 작성시에는 돋움으로 보이지만 글을 쓰고 저장을 하면 나눔고딕으로 설정된 것을 확인 할 수 있습니다.

 

< 블로그 글 작성시 폰트 모습 >

< 블로그 글 작성 후 폰트 적용 모습 >