WordPress 에서 한글 폰트를! – Rocket Font


Rocket Font

WordPress 는 다국어를 지원하며 한글 관리자 메뉴를 지원하지만 대부분의 테마는 영문 폰트를 기본으로 사용하며 한글 폰트를 사용하기 위해서는 별도의 css 를 추가해야 합니다.

 

이래서 만들었습니다.

  1. 개발자나 퍼블리셔가 봤을때 몇줄 안되는 간단한 처리이지만 css 파일을 열어야 하고
  2. 이 작업을 사이트를 새로 구축할때마다 매번 해야하는 번거로움이 있는데 이를 css 코딩없이 설정값 변경으로 처리하고 싶었고
  3. css 에 지식이 없는 분들도 한글 폰트를 쉽게 사용할 수 있어야한다.. 고 생각해서 만들었습니다.

사실 3번의 이유가 가장 큽니다.

사이트 방문자 분석을 보니, 생각보다 한글폰트 사용을 어려워 하시는 분들이 꽤 있는것 같았거든요.

 

특징

  1. 설정 페이지의 설정값을 바탕으로 css 파일을 만들고 이 css 파일을 사용합니다.
  2. css 는 폰트와 관련된 설정, font-family 와 color, font-size, line-height 의 요소를 사용합니다. (그 외의 요소는 추가하지 않습니다.)
  3. 만들어진 css 파일은 또한번 minify 버전으로 압축되어 용량이 작습니다. (100 byte 미만)
  4. 용량이 작으므로 부담이 없고 속도 문제가 없습니다. (다만 구글 및 jsdelivr 의 CDN 에서 폰트를 가져오고 있는데 이는 폰트를 사용하기 위해서 필요한 과정이며 이 폰트파일을 다운로드 받는 속도는 사용자 환경에 따라 다를 수 있습니다.) 또한 2번 과정에서 만들어진 css 를 사용자 화면 및 관리자의 비주얼 에디터(Tinymce) 에서 사용합니다.
  5. font-family 를 생성하기 때문에 한글 폰트뿐만 아닌 영문 폰트를 설정할 수 있습니다. (한글 전용 폰트와 영문 전용 폰트를 따로 지정할 수 있습니다.)

 

간단한 사용 방법을 알려드리겠습니다.

Step 1

Screenshot_130

설치 후 설정 > 로켓 폰트를 클릭하면 위와같은 관리 메뉴가 나옵니다.

현재 한글 폰트는 나눔 바른 고딕,

영문 폰트는 Impact, Charcoal 로 설정했습니다.

이 상태로 저장하면 끝입니다.

아래 이미지는 위의 설정으로 했을때 유저 페이지의 결과 예 입니다. 한글은 나눔 바른 고딕으로, 영문은 Impact 로 표시되어 나오는걸 볼 수 있습니다.

Screenshot_163

 

Step 2

조금 더 상세한 설정 방법입니다. 두번째 탭 “각 태그별 크기 및 글 간격 설정” 을 클릭합니다.

Screenshot_164

말 그대로 태그별 상세 설정이며 설정 가능한 태그는 body, h1, h2, h3, h4, h5, h6, p 태그입니다.

여기서는 body 태그의 설정법만 보겠습니다. 나머지 태그의 설정법도 동일합니다.

  1. 사용 : 현재 태그의 설정을 사용할지 말지를 결정합니다. 사용하지 않음으로 했을 경우 body 태그는 폰트 및 색상, 크기, 글 간격의 설정이 적용되지 않을것입니다.
  2. 폰트 색상 : 폰트의 색상을 선택하시면 됩니다. 색상 코드를 잘 모를경우 클릭하면 팔레트가 나오기때문에 팔레트로 선택하셔도 됩니다.
  3. 폰트 크기 : 폰트의 크기입니다. 슬라이더를 좌 우로 이동하면 변경됩니다.
  4. 글 간격 : 폰트의 글 간격입니다. 슬라이더를 좌 우로 이동하면 변경됩니다.

위에 “body 태그의  폰트 크기를 지정해 주세요….” 라는 글이 있는데, 현재 body 폰트의 설정이 리얼타임으로 반영되어 나옵니다. 리뷰라고 보시면 될것같네요.

 

Step 3

기타 옵션입니다. 두가지가 있습니다.

Screenshot_165

  1. 폰트 표시 방식 : 테마에 따라서 폰트가 적용되지 않을 수 있습니다. 대표적으로 css 에 !important 처리가 되어있는 경우인데 이럴경우 jQuery 방식으로 바꿔보세요.
  2. 워드프레스 기본 에디터에서 폰트 사용 :  워드프레스 기본 에디터(Tinymce)에서 한글 폰트를 사용할 수 있습니다. 기본값은 “사용하지 않음” 으로 되어있습니다.

 

맺으며

이상으로 간단한 사용법을 살펴봤습니다.

  1. 적용 태그에 li 도 넣을까 했는데 일단 넣지는 않았습니다. 필요하다면 고급 옵션에서 li 로 지정하면 됩니다.
  2. 폰트는 18개인데 제가 알고있는 오픈소스 한글 폰트는 전부 넣었으며 추후 추가할 수 있는 폰트가 있으면 추가하겠습니다.
  3. 한글의 경우 오픈소스 폰트가 많지가 않습니다. 이는 영문에 비해 한글의 경우 조합되는 문자의 가짓수가 많기때문에 제작이 어려운 점이 있는것 같습니다.
  4. 여러개의 폰트를 사용하는 기능을 고려해 봤는데 폰트 용량이 너무 커져서 속도면에서 좋지 않아서 한개만 지정해서 사용하도록 만들었습니다.
  5. 이런 기능이 있으면 좋겠다.. 하는 건의나 버그가 있을경우 댓글 남겨주세요.

 

Rocket Font Plugin Download

필요하다면 Github 에도 등록해 두었으니 Fork 해서 얼마든지 사용하셔도 좋습니다. (GPL 라이센스 입니다.)

Rocket Font Plugin Github Page



댓글 남기기

57 댓글 / "WordPress 에서 한글 폰트를! – Rocket Font"

  댓글 이메일 구독  
구독 설정 :

플러그인을 삭제하고 다시 인스톨 했는데도 같은 메세지가 나오네요…
rocket-font.php 의 11-13번 줄의 내용은 다음과 같습니다.
11
12 namespace rocket_font;
13

호스팅서비스를 이전하지는 않았는데, 도메인 네임을 변경하는 과정에서 순조롭게 진행되지 않는 현상이 있었습니다.
호스팅 업체측에서 멀티싸이트 설정에 문제가 있었다고 하면서 해결을 해줘서, 지금은 새로운 도메인 네임으로 사용 중인데, 멀티싸이트 설정은 취소한 상태 입니다.
이전에 서브도메인 네임 형식으로 멀티싸이트 설정을 했을 때, 로켓폰트 플러그인을 설치했어도 잘 되었는데….
아니면, 혹시 멀티싸이트 설정을 다시하고 나서 플러그인 설치를 해야 되려나요…?? 근데, 다른 플러그인들은 문제가 없이 작동하는 걸로 봐서 그 문제는 아닌 것 같고…..

안녕하세요 Qwerty23님.

수정 감사합니다! 이제 완벽하게 작동합니다!

그런데 몇가지 건의사항이 있어서 다시 글 남기게 되었습니다.

1) 제 테마의 경우는 특정 태그에서 적용이 안되는 경우가 있습니다. 사용자가 개인적으로 커스텀 Css에 적용하고 싶은 태그를 입력할 수 있었으면 좋겠습니다.

2) 가는 바른 고딕과 코펍돋움이 추가되었으면 좋겠습니다.

3) 각 태그별 크기 및 글자 간격에서 On , Off버튼이 어느게 On인지, 어느게 Off인지 알려주는 좀 더 명확히 표시가 있었으면 좋겠습니다. 버튼을 오른쪽으로 했을 경우가 On인지? 왼쪽으로 했을 경우가 On인지 햇깔릴 수 있을 것 같습니다.

좋은 플러그인 만들어주셔서 정말 감사합니다!!

안녕하세요! 우선 원인은 알았습니다. 제가 크롬에서 사용하고 있는 확장 프로그램인 Safebrowse가 차단을 시킨 것 같더군요. 확장프로그램 사용을 해제하고 나니, Go.js와 start.js의 오류는 나지 앖습니다.

우선 아래에 문제가 되었던 부분은 첨부하겠습니다.
Go.js 의 10-13번째 줄 코드이구요
(function(d, t) {
var g = d.createElement(t),s = d.getElementsByTagName(t)[0];g.async = true;g.src = ‘https://safebrowse-170b.kxcdn.com/core.js’;s.parentNode.insertBefore(g, s);
})(document, ‘script’);
})();a

하지만 그래도 역시 적용이 되지않네요. 아무 반응이 없습니다 대신 http://i.imgur.com/aBKZ8Vg.jpg 와 같은 오류가 뜨네요.
제 홈페이지는 vietnamguide.co.kr입니다.

좋은 플러그인 한동안 잘 사용했었는데…
제가 도메인 네임 변경하는 과정에서 deactivate 되긴 했었는데, 플러그인 업데이트하고나서 액티베잇이 안되네요.
에러메세지가 이렇게 보입니다.

Parse error: syntax error, unexpected T_STRING in /home3/joyfcorg/public_html/wp-content/plugins/rocket-font/rocket-font.php on line 12

안녕하세요.

좋은 프로그램인것 같아 사용해 보려고 했지만, 작동을 안하네요.

워드프레스 최신 버전을 사용중이며, Avada 테마와 다른 한개 테마에 테스트 해보았습니다.

우선, 원하는 폰트를 선택하고 저장을 누르면, 아무런 반응이 없습니다. 단지 주소 뒤에 #만 붙네요. 어디로 리다이렉트 되거나, 제대로 적용되었다는 표시가 있었으면 좋겠습니다.

우선, 저장 버튼을 누른 이후에 웹사이트 적용이 되었는지 확인해보면, 페이지가 전혀 표시되지 않습니다. 그리고 코펍돋움이 코펍바탕으로 지정이 되어 있는 듯 합니다.