웹 사이트 나눔 고딕 폰트 적용하기

많은 분들이 무료로 사용하는 나눔 고딕 폰트 적용법을 진행해보도록 하겠습니다.

블로그나 티스토리같은 데에 나눔 고딕 폰트 적용은 

구글 웹 폰트에서 URL로 CSS 받아서 진행하는 것이 찾아보면 매우 많기 때문에~

귀찮으신 분들은 웹 폰트 적용하시는게 제~~일 쉽습니다.

별건 아니지만, 그리고 구글 웹 폰트의 경우 각 브라우저별, OS 별(?) 폰트 설정이 되 있습니다.

윈도우의 경우는 ttf, 맥 OS 경우는 otf 이던가? 이런 형태인데 실제로 나눔고딕을 깔면 데스크탑 OS 적용된 파일 밖에 없죠- 로컬환경에는...(는 제가 잘 못 구해서..)

일단 맨 아래 폰트를 모두 받아 압축 파일로 올려 놓앗습니다.

압축 파일은 아래와 같이 eot, woff, ttf 확장자 명으로 여러개의 파일들을 굵기도 다양하게^^ 구성되어 있습니다.

적용은 웹 프로젝트나 어디 로컬 환경에 fonts 폴더가 있다고 가정하고, 파일들을 모두 집어 넣고 CSS 적용하시면 됩니다. 아 되게 쉽다..

/*나눔 고딕 글꼴*/
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NanumGothic/NanumGothic-Regular.eot');
  src: url('../fonts/NanumGothic/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumGothic/NanumGothic-Regular.woff2') format('woff2'),
       url('../fonts/NanumGothic/NanumGothic-Regular.woff') format('woff'),
       url('../fonts/NanumGothic/NanumGothic-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/NanumGothic/NanumGothic-Bold.eot');
  src: url('../fonts/NanumGothic/NanumGothic-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumGothic/NanumGothic-Bold.woff2') format('woff2'),
       url('../fonts/NanumGothic/NanumGothic-Bold.woff') format('woff'),
       url('../fonts/NanumGothic/NanumGothic-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/NanumGothic/NanumGothic-ExtraBold.eot');
  src: url('../fonts/NanumGothic/NanumGothic-ExtraBold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumGothic/NanumGothic-ExtraBold.woff2') format('woff2'),
       url('../fonts/NanumGothic/NanumGothic-ExtraBold.woff') format('woff'),
       url('../fonts/NanumGothic/NanumGothic-ExtraBold.ttf') format('truetype');
}

body, table, div, p {font-family:'Nanum Gothic';}

나눔고딕폰트.zip

굵기에 따른 조정도 들어가는 것 같으나..

블로그에 적용하시는 것이든, 따로 하시는 것이든 가끔 인터넷 오류로 폰트가...적용되지 않던 귀찮은 일을 당하시는 분들이 사용하시면 좋을 듯 합니다.

아 어떻게 마무리하지.. 말 주변이 없어서..

그럼 이만~