워드프레스 나눔고딕 폰트 적용하기 (웹폰트)

웹페이지에서 폰트는 매우 중요한 역할을 합니다.

아무리 좋은 글을 쓰더라도 폰트가 좋지 않으면 그만큼 가독성이 줄어들기 때문입니다.

Annotation 블로그는 기본 폰트를 사용하다가 너무 가독성이 떨어저서 "나눔고딕"으로 변경하였습니다.

폰트를 적용하기전에 플러그인으로 쉽게 해보려다가,

차라리 내손으로 직접 수정해서 쓰는게 마음이 편할것 같아서 직접 적용했습니다.

그래서 오늘의 주제는 웹폰트 적용 방법 입니다.

매우 간단한 절차이니 순서대로 따라해 주시면 되겠습니다. :D

1. 웹 폰트를 골라보자!

웹 폰트는 여러곳에서 구할 수 있지만, 저는 구글 웹폰트를 선택하였습니다.

링크를 눌러서 이동해 주시구요.

브라우저에서 나눔으로 검색하시거나 스크롤 중간쯤 못가서 이런 부분이 있습니다.

<구글 웹폰트 나눔고딕>

---

저기서 import 부분을 바로 사용하셔도 됩니다.

저는 직접 폰트명을 바꿔서 사용하려고 import 부분의 해당URL 로 이동하여 내용을 참고하여 사용했습니다.

기존 CSS를 그대로 사용하실 분들은 import 부분만 복사하여 원하시는 CSS 부분 상단에 붙혀넣고 사용하시면 됩니다. 대신 폰트명은 Nanum Gothic 그대로 사용하셔야 되구요. :)

링크로 이동하시면 다음과 같은 내용이 페이지에 출력됩니다.

/*
 * Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Nanum Gothic';
  font-style: normal;
  font-weight: 800;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');
}

 보시면 아시겠지만 CSS 내용은 폰트의 명칭과, URL을 지정해 부분이 전부입니다.

저는 여기서 폰트명을 Nanum Gothic 이 아닌 NG 로 사용하기 위해서 위의 코드를 참조하여 사용했습니다.

만약의 상황을 위해 다시한번 말씀드립니다.

---

* 폰트명을 그대로 사용하실 분들은 @import 부분을 그대로 사용하고 font-family 속성을 Nanum Gothic 으로 사용하시면 됩니다.

* 그렇지 않은 분들은 상단 코드부분을 복사하여 따로 CSS에 붙혀넣은뒤 Font-Family 속성을 변경하여 사용하시면 됩니다.

2. 웹 폰트를 적용해 보자.

적당한 웹 폰트도 골랐으니 이제 실제로 워드프레스 블로그에 적용해 봅시다.

*참고 : 워드프레스를 사용하시지 않는 분들도 하단의 CSS 적용 부분만 참고하여, 자신이 원하는 CSS에 그대로 따라하시면 되겠습니다.

먼저 FTP, 또는 워드프레스 편집기를 이용하여 style.css를 오픈합니다.

(혹시라도 FTP 기준으로 style.css를 찾지 못하시는 분이 있을것 같아 경로를 따로 말씀드리겠습니다.)

/wp-content/themes/사용중인 테마명/style.css

CSS 파일을 열으셨으면, 이제 상단에 웹폰트 코드를 붙혀넣으세요.

그리고 원하는 태그들을 콕 찝어서 웹폰트를 적용해 주시면 끝입니다.

@font-face {
  font-family: 'NG';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'NG';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'NG';
  font-style: normal;
  font-weight: 800;
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot);
  src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'),
       url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');
}

body h1,h2,h3,h4,h5,h6,td,b,p,strong,li,label,input { 
	font-family:"NG" !important ; 
}

보시면 아시겠지만, 33 라인처럼 적용할 폰트명을 적어주시면 됩니다.

간단하죠? :D

3. 마치며

웹 폰트를 사용하시면서 몇가지 주의사항이 있습니다.

 

첫번째, 웹 폰트를 사용하게되면 웹 폰트를 제공하는 URL에 요청해 import 하기 때문에 웹페이지 로드 속도가 줄어들 수 있습니다.

실제로 웹폰트 때문에 속도 저하를 많이 느끼시는 분들이 많습니다.

 

두번째, 다른 폰트를 사용하시는 경우 주의점이 있습니다. 예를들어 A, B, P 태그 등에 아이콘과 관련된 폰트를 사용하였는데, 거기서 다른 폰트가 적용되면 당연히 이전폰트를 적용이되지 않습니다.

당연한 이야기 입니다만, 웹사이트 규모가 큰 경우와 CSS 관리가 제대로 되지 않은경우는 저렇게 덮히는 경우가 종종 생깁니다.

 

세번째, 내부망을 사용하는 경우 방화벽 때문에 구글쪽에 접속하지 못하여 웹폰트를 받아오지 못할 수 있습니다.

프로젝트에 사용하실 경우 해당 망에서 꼭 접속하여 확인해보시길 당부드립니다.

 

무료로 제공되는 웹폰트를 잘 사용하면 좋지만 그렇지 않은경우는 문제가 되는경우가 있으니,

꼭 잘 확인하시고 사용하시길 당부드립니다.

적용이 되지 않거나 이해되지 않는 부분이 있으면 말씀해주세요 :)

긴글 읽어주셔서 감사합니다.