문제점

테마에 한글폰트 적용시 이쁜 글자체가 안 나옵니다.

워드프레스 테마는 주로 영어권에서 개발합니다. 영어권이 아닌 곳에서 개발을 해도 영어 사용을 기준으로 개발합니다. 그래서 데모 사이트도 대부분 영어로 되어 있습니다. 여기서 문제가 발생합니다. 영어로 되어 있을 때는 아주 보기 좋은데, 한글로 바뀌면 이상해지는 경우가 많습니다. 멋진 디자인과 타이포그래피에 반해서 테마를 구입했는데, 한글을 사용하는 순간 기대했던 결과가 나오지 않는 것이죠.

이를 해결하는 방법은 글꼴을 적절한 한글 폰트로 설정해주는 것입니다. 하지만 글꼴 설정은 테마 파일을 수정해야 하는 번거로운 작업이고, 개발자가 아니라면 어려운 작업이기도 합니다.(출처 : 2. 워드프레스 강좌 / 플러그인 / Rocket Font / 한글 글꼴 웹폰트로 설정하게 해주는 플러그인 )

해결책

플러그인으로 해결

워드프레스 강좌 / 플러그인 / Rocket Font / 한글 글꼴 웹폰트로 설정하게 해주는 플러그인 에서는 플러그인으로 해결하는 방법을 소개하고 있습니다.

사용해본 결과 무료 글꼴이 약간 적은 점은 아쉬습니다.

[Memo]

구글/네이버 등에도 무료 폰트가 있는 것으로 알고 있으니 이 무료 폰트들을 워드프레스에 탑재하여 사용하는 방법을 더 알아보시면 좋을 것 같습니다. 

전에 사두고 안 보고 있는 전자책에도 폰트 구현방법이 있으니 시간되실때 보강해 주세요.

어쨌든 전에는 영어 폰트와 한글 폰트가 달라 무언가 언발란스한 느낌을 받았는데, 그런 점이 없어 좋고 한글 폰트는 원래 저희가 아래한글에서 보았건 웹에서 보았건 많이 보던 글꼴(폰트)들이어서 이질감이 없고 글자체가 편안해 보입니다.

Rocket Font

• Version:1.2.3
• Last updated:1 month ago
• Active installations:4,000+
• WordPress Version:3.5.1 or higher
• Tested up to:5.4.2

사용할 수 있는 한글 폰트 종류

가장많이 사용하는 나눔 고딕(Nanum Gothic)이나 나눔 명조(Nanum Myeingjo) 중에 하나를 사용하는 것이 무난해 보이고 현재 네이버에서는 나눔 고딕이 사용되고 있는 것 같습니다.

• 한나
• 제주 고딕
• 제주 한라산
• 제주 명조
• KoPub 바탕
• 나눔 고딕
• 나눔 바른 고딕
• 나눔 붓글씨
• 나눔 고딕 코딩
• 나눔 명조
• 나눔 펜글씨
• NotoSansKR
• 스포카 한 산스
• 나눔 스퀘어

사용할 수 있는 한글 폰트의 실제 모양을 확인하는 방법

위에서 서술된 폰트들이 어떻게 표시되는지는 구글 폰트에서 언어를 “Korean”으로 설정해서 보시거나  https://fonts.google.com/?subset=korean 을 클릭하시면 살펴보실 수 있습니다.

유의할 점

유의할 점은 워드프레스 에디터로 elementor를 사용하는 경우,  Rocket Font 에서 설정한 한글 폰트가 기본 적용되지 않습니다.

이럴때는 엘리멘터의 [텍스트 에디터 편집]화면에서 [스타일]을 선택하시고 [서체]선택 버튼에서 Rocket Font에서 기본 폰트로 설정한 폰트를 찾아 선택해주시면 됩니다.

사용법

기본 설정(body 폰트 설정)

관리자 > 설정 > 로켓 폰트 에서 사용하고 싶은 폰트를 선택한 후 저장하면 끝입니다.

h1 ~ h6(제목1 ~ 제목6) 폰트 설정

h1 ~ h6(제목1 ~ 제목6) 폰트는 관리자 > 설정 > 로켓폰트 > “각 태그별 크기 및 글 간격 설정”에서 설정할 수 있습니다.

body 는 위에 폰트설정만으로 가능하고 h1 ~ h6(제목1 ~ 제목6) 폰트는 모두 사용 check해주시고 저장하면 됩니다.

(고급) class 및 id로 설정

테마에 따라 적용되지 않는 부분들이 있으므로 확인해 주셔야 합니다.  Twenty Seventeen에서는 일단 사이트 제목과 태그라인에 적용되지 않네요.

이를 해결하는 부분이 [(고급) class 및 id로 설정]입니다.

워드프레스 강좌 / 플러그인 / Rocket Font / 한글 글꼴 웹폰트로 설정하게 해주는 플러그인 에서 알려주는 것처럼 사이트 제목의 클래스는 site-title, 태그라인의 클래스는 site-description입니다. “.site-title”과 “.site-description”를 추가해 주었습니다. 

저의 경우, 메인 메뉴의 폰트가 변경이 안되기에 찾아보니 id 가 primary-menu여서 #primary-menu를 추가로 입력해 주었습니다. 

변경하고자 하는 요소는 크롬의 요소 검사(F12) 등으로 값을 찾을 수 있습니다. 그 값을 찾은후 클래스이면 .을 추가, ID라면 #을 추가해주시면 됩니다. 

클래스라면 앞에 점(.)을, ID 라면 앞에 샾(#)을 반드시 붙여서 입력해 주세요.

1. 클래스 입력 예) .example-class(엔터)
2. ID 입력 예) #example-id(엔터)
3. 연결해서 입력하는것도 가능합니다. content 클래스 안의 p 태그에 적용 입력 예) .content>p(엔터)

(옵션)폰트가 제대로 표시되지 않을 경우

• 만약 설정한 (옵션)폰트가 제대로 표시되지 않을 경우 옵션중에 [표시 방식]을 jQuery 방식으로 설정해 보세요.

테마편집기로 해결

기존에는 style.css에서 변경이 가능했는데, 2020-09-10 기준 현재는 테마편집기 자체를 들어갈 수 없습니다.

1. 워드프레스 관리자 페이지 > 외모 > 테마편집기(style.css)로 이동합니다.
2. ctrl + F를 눌러 ‘font’ 를 검색합니다.
3. 검색된 ‘font’ 들 중 body 영역으로 이동하여 폰트 사이즈를 변경합니다.

FAQ

Q. 유료 테마를 구입했는데 한글 폰트가 이쁘지 않습니다. 쉽게 해결하는 방법이 있을까요 ?

A. Rocket Font 플러그인(  https://wordpress.org/plugins/rocket-font/ )을 사용해 보세요.

Q. 사용할 수 있는 한글 폰트의 실제 모양은 어디서 확인할 수 있나요 ?

위에서 서술된 폰트들이 어떻게 표시되는지는 구글 폰트에서 언어를 “Korean”으로 설정해서 보시거나  https://fonts.google.com/?subset=korean 을 클릭하시면 살펴보실 수 있습니다.

Q. 워드프레스 에디터로 elementor를 사용하는데, Rocket Font 에서 설정한 한글 폰트가 기본 적용되지 않는데 해결방법이 있을까요?

이럴때는 엘리멘터의 [텍스트 에디터 편집]화면에서 [스타일]을 선택하시고 [서체]선택 버튼에서 Rocket Font에서 기본 폰트로 설정한 폰트를 찾아 선택해주시면 됩니다.

Q. Rocket Font 플러그인을 설치하여 설정을 하였는데, 폰트가 제대로 표시되지 않을 경우에는 어떻게 해결할 수 있나요 ?

A.만약 설정한 (옵션)폰트가 제대로 표시되지 않을 경우 옵션중에 [표시 방식]을 jQuery 방식으로 설정해 보세요.

---

참과자료 : 1.  워드프레스 폰트, 글자 크기 사이즈 변경하기

2. 워드프레스 강좌 / 플러그인 / Rocket Font / 한글 글꼴 웹폰트로 설정하게 해주는 플러그인