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"

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

안녕하세요, 덕분에 워드프레스에서도 한글폰트 잘 사용하고 있습니다, 감사합니다.
다만, 한가지 오류가 있는 것 같아 문의 드립니다.
현재 로켓폰트를 통해 나눔바른고딕 light를 사용하고 있습니다.
사용 중 “효”자 ‘ㅎ’ 의 ‘ㅇ’ 부분이 다른 문자 보다 연하게 표시되는 걸로 나타나고 있습니다.

http://konnectthing.co.kr/?page_id=916
http://konnectthing.co.kr/?page_id=970

“효”를 검색해보시면 보이실텐데요,
보시는것과 같습니다. 워드프레서 텍스트 에디터에서 ‘문단(테마 기본)’으로 사용했을 시
문제가 발생하지 않는데,
로켓 폰트에서 적용한 h태그를 적용한 부분은 ‘ㅇ’가 연하게 나옵니다.

검토 부탁드립니다!!

안녕하세요. 로켓폰트를 사용해서 한글폰트를 잘 사용하고 있습니다.

한가지 문의 사항이 있습니다.

크롬에서는 나눔 바른 고딕이 제대로 잘 반영이 되는데 IE에서는 적용되는 태그가 있고 안되는 태그가 있습니다.

혹시 IE에 제대로 반영되게 하려면 어떤 방법이 있는지 문의드립니다.

네~ 감사합니다!
정말 좋은 플러그인 입니다.
사용자를 위한 친절한 배려도 너무 감사합니다!

오늘 아침 혹시나하고 다시 Activate을 눌러보았더니 되네요~

어제 확실히하느라 PHP 5.4로 변경옵션을 누르고, 위의 내용들을 추가했어도 아무런 효과가 없었는데…
아마도, DNS관련 문제가 있었나 봅니다. php5.2와 5.4를 제공한다고 적혔던 걸로 봐서, 지적하신대로, 5.2로 바뀌었었나 봅니다.  신경써 주셔서 정말 감사합니다.

이제 paragraph font size 설정 문제만 해결하면 됩니다.  로겟폰트 setting 에서 변화를 주어도 영향을 미치지 못하네요…  다른 body, h1,2,3..등은 적용이 되는데…

http://joyalbany.org  (joyfc.org 에서 변경) Bluehost를 이용중입니다.
호스팅업체에 등록만해놓고 있다가, 한달 전쯤 싸이트를 꾸미기 시작했습니다.
처음 신청했던 도메인네임보다 이 지역 사람들이 기억하기 쉬운 이름으로 바꾸다보니 이런 일이 발생했네요..