Rocket Font
WordPress 는 다국어를 지원하며 한글 관리자 메뉴를 지원하지만 대부분의 테마는 영문 폰트를 기본으로 사용하며 한글 폰트를 사용하기 위해서는 별도의 css 를 추가해야 합니다.
이래서 만들었습니다.
- 개발자나 퍼블리셔가 봤을때 몇줄 안되는 간단한 처리이지만 css 파일을 열어야 하고
- 이 작업을 사이트를 새로 구축할때마다 매번 해야하는 번거로움이 있는데 이를 css 코딩없이 설정값 변경으로 처리하고 싶었고
- css 에 지식이 없는 분들도 한글 폰트를 쉽게 사용할 수 있어야한다.. 고 생각해서 만들었습니다.
사실 3번의 이유가 가장 큽니다.
사이트 방문자 분석을 보니, 생각보다 한글폰트 사용을 어려워 하시는 분들이 꽤 있는것 같았거든요.
특징
- 설정 페이지의 설정값을 바탕으로 css 파일을 만들고 이 css 파일을 사용합니다.
- css 는 폰트와 관련된 설정, font-family 와 color, font-size, line-height 의 요소를 사용합니다. (그 외의 요소는 추가하지 않습니다.)
- 만들어진 css 파일은 또한번 minify 버전으로 압축되어 용량이 작습니다. (100 byte 미만)
- 용량이 작으므로 부담이 없고 속도 문제가 없습니다. (다만 구글 및 jsdelivr 의 CDN 에서 폰트를 가져오고 있는데 이는 폰트를 사용하기 위해서 필요한 과정이며 이 폰트파일을 다운로드 받는 속도는 사용자 환경에 따라 다를 수 있습니다.) 또한 2번 과정에서 만들어진 css 를 사용자 화면 및 관리자의 비주얼 에디터(Tinymce) 에서 사용합니다.
- font-family 를 생성하기 때문에 한글 폰트뿐만 아닌 영문 폰트를 설정할 수 있습니다. (한글 전용 폰트와 영문 전용 폰트를 따로 지정할 수 있습니다.)
간단한 사용 방법을 알려드리겠습니다.
Step 1
설치 후 설정 > 로켓 폰트를 클릭하면 위와같은 관리 메뉴가 나옵니다.
현재 한글 폰트는 나눔 바른 고딕,
영문 폰트는 Impact, Charcoal 로 설정했습니다.
이 상태로 저장하면 끝입니다.
아래 이미지는 위의 설정으로 했을때 유저 페이지의 결과 예 입니다. 한글은 나눔 바른 고딕으로, 영문은 Impact 로 표시되어 나오는걸 볼 수 있습니다.
Step 2
조금 더 상세한 설정 방법입니다. 두번째 탭 “각 태그별 크기 및 글 간격 설정” 을 클릭합니다.
말 그대로 태그별 상세 설정이며 설정 가능한 태그는 body, h1, h2, h3, h4, h5, h6, p 태그입니다.
여기서는 body 태그의 설정법만 보겠습니다. 나머지 태그의 설정법도 동일합니다.
- 사용 : 현재 태그의 설정을 사용할지 말지를 결정합니다. 사용하지 않음으로 했을 경우 body 태그는 폰트 및 색상, 크기, 글 간격의 설정이 적용되지 않을것입니다.
- 폰트 색상 : 폰트의 색상을 선택하시면 됩니다. 색상 코드를 잘 모를경우 클릭하면 팔레트가 나오기때문에 팔레트로 선택하셔도 됩니다.
- 폰트 크기 : 폰트의 크기입니다. 슬라이더를 좌 우로 이동하면 변경됩니다.
- 글 간격 : 폰트의 글 간격입니다. 슬라이더를 좌 우로 이동하면 변경됩니다.
위에 “body 태그의 폰트 크기를 지정해 주세요….” 라는 글이 있는데, 현재 body 폰트의 설정이 리얼타임으로 반영되어 나옵니다. 리뷰라고 보시면 될것같네요.
Step 3
기타 옵션입니다. 두가지가 있습니다.
- 폰트 표시 방식 : 테마에 따라서 폰트가 적용되지 않을 수 있습니다. 대표적으로 css 에 !important 처리가 되어있는 경우인데 이럴경우 jQuery 방식으로 바꿔보세요.
- 워드프레스 기본 에디터에서 폰트 사용 : 워드프레스 기본 에디터(Tinymce)에서 한글 폰트를 사용할 수 있습니다. 기본값은 “사용하지 않음” 으로 되어있습니다.
맺으며
이상으로 간단한 사용법을 살펴봤습니다.
- 적용 태그에 li 도 넣을까 했는데 일단 넣지는 않았습니다. 필요하다면 고급 옵션에서 li 로 지정하면 됩니다.
- 폰트는 18개인데 제가 알고있는 오픈소스 한글 폰트는 전부 넣었으며 추후 추가할 수 있는 폰트가 있으면 추가하겠습니다.
- 한글의 경우 오픈소스 폰트가 많지가 않습니다. 이는 영문에 비해 한글의 경우 조합되는 문자의 가짓수가 많기때문에 제작이 어려운 점이 있는것 같습니다.
- 여러개의 폰트를 사용하는 기능을 고려해 봤는데 폰트 용량이 너무 커져서 속도면에서 좋지 않아서 한개만 지정해서 사용하도록 만들었습니다.
- 이런 기능이 있으면 좋겠다.. 하는 건의나 버그가 있을경우 댓글 남겨주세요.
필요하다면 Github 에도 등록해 두었으니 Fork 해서 얼마든지 사용하셔도 좋습니다. (GPL 라이센스 입니다.)
댓글 남기기
57 댓글 / "WordPress 에서 한글 폰트를! – Rocket Font"
이렇게 좋은 플러그인을 만들어 주셔서 정말 감사합니다.
현재 Hestia 라는 테마를 쓰면서 Elementor라는 에디터 사용합니다.
만들어 주신 플러그인을 사용하면 에디터 상에서는 적용이 되는데
막상 웹사이트에서는 적용이 안 됩니다.
말씀하신대로 jQuery 방식으로 바꿔 봤는데 변화가 없습니다.
도와주시면 정말 감사하겠습니다.
안녕하세요.
적용이 안된다는 사이트 주소를 알려주시면 제가 한번 확인해 보겠습니다.
댓글을 쓰는데 자꾸 사라집니다.ㅠㅠ
muko.or.kr입니다.
근데, 이 사이트에 글을 쓰면 자꾸 사라집니다. 저만 그런가요?
muko.or.kr입니다. 감사합니다.
감사합니다. muko.or.kr입니다.
아 댓글이 사라지는게 아니라 승인제라서 ( 제가 승인을 해야 표시됩니다. ) 승인 대기로 넘어간겁니다.
안그러면 광고나 스팸이 감당이 안되서요.
말씀해주신 사이트를 제가 확인해봤는데, 로켓폰트에서 제주고딕체로 설정하셨고

웹 페이지에도 잘 적용되고 있는것 같습니다.
아마 jquery 방식을 사용하지 않아도 잘 나올것 같은데 한번 해보시고 말씀주시면 될것같습니다.
정말 고맙습니다. 좋은 위젯 만들어주셔서. 십년 묵은 체증이 내려가는 사이다 입니다.
댓글 달고 싶어 열심히 찾아 왔습니다.
고맙습니다.
안녕하세요. 문의 드립니다.
혹시 noto sans kr 의 경우 ie 브라우져 에서 적용이 안되는 문제가 이슈화 되었었는데요.
이것이 해결 되었는지 문의 드립니다.
지금 적용 해보니 크롬에선 정상 작동 하는데 익스에서만 적용이 안되는게 해결이 안된건지 테마 문제인지 모르겠어서요.
감사합니다!!
https://ibb.co/nEdKun
위의 스샷처럼 폰트선택 자체가 불가능한데… 뭐가 문제일까요 ㅠㅠ
익스플로러나 크롬에서 모두 그러네요 ㅠㅠ
안녕하세요. 제가 따로 이메일로 답장을 드리긴 했는데 댓글로도 남겨봅니다.
질문 답변 게시판에 답변을 올렸으니 한번 확인해 보세요.