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"

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

매우 잘 사용하고 있습니다. 감사할 따름입니다.
한가지 여쭙고 싶은 것은, 홈페이지에서 한글과 영문을 다 사용하는데,
한글만 Google Font로 설정하고, 영문은 그냥 원래 Theme에서 설정된 데로 사용할 수도 있나요?
현 설정은, 한글을 먼저 설정하고 영문을 설정 안하면 한글 font로, 영문도 설정하면 영문 역시 Google font로 사용해야 하는 것 같아서요…

워드프레스를 사용하면서 @import로 웹폰트를 아무리 적용해도 MS Edge에서는 굴림으로만 나와서 골치아프던 중에 이 플러그인을 발견하고 할렐루야를 외쳤습니다. 저도 VINVINY님과 같은 생각을 했는데요. 영문은 구글폰트에서 골라 썼는지라 (주로 Open Sans나 Roboto) 한정되어 있는게 아주 쪼~~~금 아쉽더라구요. 댓글의 팁 주신대로 하겠습니다. 감사합니다.

유용한 플러그인 개발해 주셔서 정말 감사합니다. 기존 한국어 글꼴 관련 플러그인들은 abandon된지 오래여서 다른 분들에게 추천하기 망설여졌거든요. 단연 압도적으로 사용하기 쉽고 편리하면서 친절한 플러그인입니다. 커피라도 사드리고 싶어요…

안녕하세요. 잘 다운받아 이것 저것 적용중입니다. 고급기능에서 >a li ul 등 제대로 적용되지 않는 부분에 적용하기 위해서 폰트가 제대로 적용 안되는 부분의 class 와 id 등등 a li ul 태그들도 하나하나 다추가해서 추가를 해줬는데도 적용이 안됩니다. ㅠㅠ css 소스를 강제적용 아래처럼 !importance 옵션주고하면 강제로 다 적용은 되는데 유료로 구매한 테마 소셜아이콘들이 네모ㅁ로 표시가 되는 사태가 있어서요. 가능하면 로켓폰트로 셋팅해서 적용하고 싶은데 특정 몇군대가 아무리 해도 바뀌질 않습니다. ㅠㅠ 홈페이지 주소는 babo.tips 이며 우측에 글 목록 하단에 날짜 카테고리 하단에 미분류가 적용이 안되는 부분입니다. 어떻게 적용을 시킬 수 있을까요..? css강제적용소스 @import “http://fonts.googleapis.com/earlyaccess/nanumgothic.css”; @import “http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css”; body, h1, h2, h3, h4, h5, h6,… 더 보기 »

댓글
Newspaper 8 유료 테마를 적용하여 구축 중 플러그인 적용이 되질 않아 문의드립니다.

‘아바다’에는 잘 적용됨에 감사한 마음 항상 가지고 있습니다.

잘 쓰고 있습니다.
본명조 좀 추가해주시면 안될까요?