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"
플러그인을 삭제하고 다시 인스톨 했는데도 같은 메세지가 나오네요…
rocket-font.php 의 11-13번 줄의 내용은 다음과 같습니다.
11
12 namespace rocket_font;
13
호스팅서비스를 이전하지는 않았는데, 도메인 네임을 변경하는 과정에서 순조롭게 진행되지 않는 현상이 있었습니다.
호스팅 업체측에서 멀티싸이트 설정에 문제가 있었다고 하면서 해결을 해줘서, 지금은 새로운 도메인 네임으로 사용 중인데, 멀티싸이트 설정은 취소한 상태 입니다.
이전에 서브도메인 네임 형식으로 멀티싸이트 설정을 했을 때, 로켓폰트 플러그인을 설치했어도 잘 되었는데….
아니면, 혹시 멀티싸이트 설정을 다시하고 나서 플러그인 설치를 해야 되려나요…?? 근데, 다른 플러그인들은 문제가 없이 작동하는 걸로 봐서 그 문제는 아닌 것 같고…..
안녕하세요 joy 님
네 해당 줄은 문제가 없는것 같구요.
설치한 플러그인 버전이 1.0.2(최신) 가 맞나요? 혹시 1.0.1 이라면 1.0.2 로 버전업을 한 후 확인 부탁드립니다.
1.0.2 인데도 같은 오류가 난다면..
말씀하신대로 멀티사이트 설정을 한다고 해서 오류가 사라지지는 않을것 같습니다.
PHP 버전이 완전 옛날 버전이라면 저런 오류가 날 수 있는데 이전부터 사용하던 호스팅이라니 그렇지도 않을것같고..
호스팅은 변경하지 않고 도메인 네임만 바꾸셨다는게 잘 이해가 안가네요..
보통 도메인은 유지를 하고 호스팅을 변경할때 DNS 를 변경하게 되는데..
혹시 운영중인 사이트 URL 을 알려주실수 있을까요?
안녕하세요 Qwerty23님.
수정 감사합니다! 이제 완벽하게 작동합니다!
그런데 몇가지 건의사항이 있어서 다시 글 남기게 되었습니다.
1) 제 테마의 경우는 특정 태그에서 적용이 안되는 경우가 있습니다. 사용자가 개인적으로 커스텀 Css에 적용하고 싶은 태그를 입력할 수 있었으면 좋겠습니다.
2) 가는 바른 고딕과 코펍돋움이 추가되었으면 좋겠습니다.
3) 각 태그별 크기 및 글자 간격에서 On , Off버튼이 어느게 On인지, 어느게 Off인지 알려주는 좀 더 명확히 표시가 있었으면 좋겠습니다. 버튼을 오른쪽으로 했을 경우가 On인지? 왼쪽으로 했을 경우가 On인지 햇깔릴 수 있을 것 같습니다.
좋은 플러그인 만들어주셔서 정말 감사합니다!!
잘 된다니 다행이네요. 저야말로 알려주셔서 감사합니다.
건의사항은
1. 네 고려해 보겠습니다. 그런데 span,p 등의 html 태그에 적용하고 싶은거라면 그냥 저에게 요청하시면 될것같습니다.
2. 이건 추가할 예정입니다. 다만 코펍 돋움같은경우 CDN 에 등록한 분에게 연락을 해서 css 파일을 수정해달라고 요청해야 할것같은데, 홈페이지도 없고 마땅히 연락할 방법이 없네요..
3. 네 이건 OFF 일때 취소선을 넣을 생각입니다.
2,3 번은 테스트 후 이상이 없으면 업데이트를 하겠습니다.
좋은하루 되세요~
안녕하세요! 우선 원인은 알았습니다. 제가 크롬에서 사용하고 있는 확장 프로그램인 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입니다.
안녕하세요 마꼬님
네. 보내주신 스크린샷 감사합니다.
덕분에 원인을 알아서 수정할 수 있었습니다.
현재 패치를 해서 버전업을 했고 (1.0.2) 플러그인을 업데이트 한 후 사용하시면 됩니다.
업데이트 후 잘 되는지 알려주시면 감사하겠습니다.
좋은 플러그인 한동안 잘 사용했었는데…
제가 도메인 네임 변경하는 과정에서 deactivate 되긴 했었는데, 플러그인 업데이트하고나서 액티베잇이 안되네요.
에러메세지가 이렇게 보입니다.
Parse error: syntax error, unexpected T_STRING in /home3/joyfcorg/public_html/wp-content/plugins/rocket-font/rocket-font.php on line 12
안녕하세요 joy님
글 감사합니다.
덕분에 원인을 알아서 수정할 수 있었습니다.
현재 패치를 해서 버전업을 했고 (1.0.2) 플러그인을 업데이트 한 후 사용하시면 됩니다.
업데이트 후 잘 되는지 알려주시면 감사하겠습니다.
안녕하세요.
이상하네요. 해당 에러 메세지는 구문 오류라는 뜻인데..
제가 버전별로 반복해서 확인해 봤습니다만 오류가 나지는 않았습니다.
혹시 최근에 호스팅 서비스를 이전하거나 하신적이 있으신가요?
이전한적이 없다면 플러그인을 완전히 삭제한 후 새로한번 받아서 설치해보시고
그래도 안된다면, 가능하시다면 /wp-content/plugins/rocket-font/rocket-font.php 파일의 11번줄부터 13번줄까지 어떻게 되어있는지 저에게 알려주시면 감사하겠습니다.
안녕하세요.
좋은 프로그램인것 같아 사용해 보려고 했지만, 작동을 안하네요.
워드프레스 최신 버전을 사용중이며, Avada 테마와 다른 한개 테마에 테스트 해보았습니다.
우선, 원하는 폰트를 선택하고 저장을 누르면, 아무런 반응이 없습니다. 단지 주소 뒤에 #만 붙네요. 어디로 리다이렉트 되거나, 제대로 적용되었다는 표시가 있었으면 좋겠습니다.
우선, 저장 버튼을 누른 이후에 웹사이트 적용이 되었는지 확인해보면, 페이지가 전혀 표시되지 않습니다. 그리고 코펍돋움이 코펍바탕으로 지정이 되어 있는 듯 합니다.
안녕하세요. 업데이트가 된 걸 보고 들어왔더니 답변을 주셧더라구요! 답변 감사합니다.
크롬으로 확인해봤더니, 오류가 뜨네요. 우선 http://i.imgur.com/Jed6rIs.jpg는 저장을 누르자마자 뜨는 스크린샷이며, http://i.imgur.com/vMIT77C.jpg는 저장을 누른 후 아무 반응이 없을때의 스크린 샷입니다.
제 서버의 권한 문제인가 싶어서 Wp-content를 확인해보니 755 상태였습니다. roket-font 폴더를 777로 줘도 안되더군요
워드프레스 최신 버전을 사용중이며, Cloude flare Cdn과 W3 total cache가 깔려져 있습니다.
그런데 저번에 아무것도 안깔려진 웹사이트 테스트 해보았을때도 똑같았네요~ 더 필요하신 정보가 있으시면 제공해드리겠습니다. 그럼 수고하세요!