워드프레스 한글 폰트 적용 방법 (웹폰트, 플러그인)

우리가 글을 읽을 때 어떤 폰트를 사용하고 있느냐에 따라 글의 가독성 차이가 많이 발생합니다. 폰트의 가독성이 좋을 경우 글을 더 오래동안 읽게 되는 경험을 하곤합니다. 이번 글에서는 워드프레스에서 기본적으로 제공하는 폰트가 마음에 들지 사용자 정의 (커스텀) 한글 폰트를 사용하는 방법에 대해 알아 보겠습니다. 사용하는 테마에 따라 테마에서 기본적으로 제공하는 폰트들을 사용해도 되지만, 이번 글에서는 사용하는 테마와 상관없이 웹폰트를 IMPORT 하여 사용하는 방법플러그인을 사용하는 방법에 대해 정리하였습니다.



1. 웹 폰트 사용 방법 (눈누 폰트, 구글 폰트)

무료 폰트를 제공하는 사이트가 많이 있지만 대표적으로 ‘눈누‘ 웹사이트와 ‘구글 폰트‘ 웹사이트가 있습니다. 웹폰트를 사용하기 위해서는 ‘눈누’와 ‘구글 폰트’ 사이트서 사용에서 원하는 폰트를 찾습니다.

눈누 폰트 웹사이트


무료 폰트 웹사이트

아래에 무료 폰트 사이트 링크 남겨드리니, 사용하시기 바랍니다.


눈누 웹사이트에 있는 ‘프리텐다드’ 폰트를 사용하는 방법으로 설명하겠습니다. ‘프리텐다드’ 페이지로 들어가서 우측에 있는 [웹폰트로 사용] 항목에 있는 내용을 복사합니다. 화살표로 표시한 단축 아이콘을 선택 내용이 복사가 됩니다.

눈누 웹사이트 폰트


워드프레스 관리 페이지로 이동한 후 [외모] – [사용자 정의하기]-[추가 CSS]를 클릭합니다.

워드프레스 사용자 정의하기


추가 CSS를 누르면 코드를 넣을 수 있는 창이 나타납니다. 그 아래 눈누에서 복사한 폰트 IMPORT 코드를 붙여 넣습니다. 해당 코드는 구글 폰트에서 제공하는 API를 이용하여 내 워드프레스에 폰트를 불러오는 코드입니다. 여러 개의 폰트를 사용할 경우 IMPORT할 폰트 코드를 계속 붙여 넣으시면 됩니다.

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

.notosanskr * { 
 font-family: 'Noto Sans KR', sans-serif;
}


폰트를 IMPORT 했다면 그 다음은 적용할 항목에 대한 세팅을 입력합니다. 아래 코드를 복사해서 수정해서 사용하시면 됩니다. 예들 들어 본문 내용에 대해 수정을 하려고 하면 아래와 같이, 사용할 글자, 글자 크기, 글폰 색상을 설정하시면됩니다.

p {
  font-family: 'Note Sans KR', sans-serif;
  font-size: 16px;
  color: #333333;
}


아래 예시는 본문, 목차, 헤딩 (h2, h3)까지 설정한 것입니다. 아래 참고하셔서 본인의 워드프레스 폰트를 수정하시면 됩니다.

폰트 설정


위와 같이 본문 폰트 크기를 변경할 경우 블로그 첫화면 목록에서 아래와 같이 요약 글이 차지하는 영역이 넓어져서 이쁘지 않게 보이는 경우가 있습니다. 이 경우 디스크립션 영역에 나오는 글자 수를 조정을 통해 공간을 조정할 수 있습니다.

[관련 글]  워드프레스 테마 수정해도 적용이 되지 않는 문제 해결 방법 (캐시 삭제)

워드프레스 목록


워드프레스 관리 페이지에서 [외모] – [테마 파일 편집기] 을 선택하고 오른쪽에 있는 ‘테마 파일’ 패턴에서 [Theme Functions]를 선택합니다. 해당 페이지 제일 아래로 내려가 아래 코드를 추가 해줍니다.

function custom_excerpt_length( $length ) {
    return 18;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );


코드에서 수정할 부분은 ‘return’ 뒤에 추가되는 숫자입니다. 해당 숫자 조절을 통해 표시되는 글자 수를 조정할 수 있습니다.

목록 글자수 수정



코드 수정을 완료하면 아래와 같이 워드프레스 첫화면 목록에서 ‘Description’ 글자수가 줄어들어 내가 원하는 형태로 화면이 표시되는 것을 보실 수 있습니다.

워드프레스 목록

CSS 파일에서 폰트 관련해서 여러 가지 설정을 할 수 있습니다. 폰트 모양과 글자 크기 뿐만 아니라, 자간, 어간, 줄간격 또한 조정할 수 있습니다. 아래는 설정을 할 때 알아두면 좋은 CSS 속성들입니다.

알아두면 좋은 CSS 속성

  • font-style: italic; (폰트 기울기)
    • italic: 폰트 기울기
    • normal:일반
    • italic:이탤릭체
    • oblique:기울기
  • font-weight:bold; (폰트 굵기)
    • normal:일반
    • small-caps: 작은 대문자
  • letter-spacing: 자간 (글자 간격)
    • 예시: letter-spacing: 10px;
  • word-spacing: 어간 (단어 간격)
    • 예시: word-spacing: 10px;
  • line-height: 줄 간격
    • normal; 웹브라우저에서 정한 기본값. 보통 1.2( 글자의 1.2배 )
    • length : 단위를 적용하여 길이를 고정함 ( ex. line-height: 20px; )
    • number : 글자 크기의 몇 배인지로 줄 높이를 정함 ( ex. line-height: 2;)
    • percentage : 글자 크기의 몇 %로 줄 높이로 정함 (ex. line-height: 60%; 글자크기를 기준이므로 100%가 1가 동일하다.)


여기까지가 CSS 코드 수정을 통해 웹폰트를 사용하는 방법입니다.




2. 한글폰트 플러그인 사용하기

웹 폰트를 IMPORT 해서 사용하는 방법은 ‘구글 폰트’, ‘눈누’와 같이 무료 폰트를 제공하는 웹사이트에서 폰트를 가져와서 사용하기 때문에 페이지를 로딩하는 속도가 조금 느려질 수 있습니다. 플러그인을 통해 사용할 폰트를 내 서버에 업로드해서 사용하거나, 폰트 자체가 포함된 플러그인을 사용할 경우 웹폰트를 사용하는 것보다 페이지 로딩 속도를 높일 수 있습니다.

[관련 글]  워드프레스 글 구글 서치 콘솔과 빙에 자동으로 등록되게 하기 (Instant Indexing API 설정)

2.1. Use Any Font 플러그인

폰트를 직접 업로드해서 사용할 수 있는 플러그인으로는 ‘Use Any Font’이 있습니다. [플러그인] – [새로 추가] 를 통해 [Use Any Font]를 설치합니다.

Use Any Font 플러그인


플러그인 설치가 완료되면 왼쪽 메뉴에서 [Use Any Font] 항목을 선택한 후 API 키를 생성합니다. [Generate Free Lite/Test API Key]를 클릭하여 키를 생성 후, [Verify]를 클릭하여 인증을 진행합니다.

Use Any Font 사용 방법



API Key 생성이 완료되면 [Upload] 탭으로 이동하여 이용하고자하는 폰트를 추가합니다. 아래 그림처럼 [Upload Fonts]를 클릭하면 [파일 선택] 버튼과 [Upload] 버튼이 생깁니다. 업로드하고자 하는 파일을 선택한 후 [Upload] 버튼을 클릭하여 업로드를 완료합니다.

폰트 업로드



폰트 설정을 위해 [Assign Font] 으로 이동합니다. [Select Font]에서 변경하고자하는 폰트를 선택 후 적용할 항목을 선정 후 적용 버튼을 누릅니다.

폰트 설정하기




2.2. Rocket Font 플러그인

Rocket Font 플러그인의 경우 Use Any Font 플러그인과 달리 한글 폰트 일부가 내장이 되어 있으며 설정이 쉽게 되어 있습니다. 단점은 내장되어 있는 폰트만 사용할 수 있다는 점입니다.

플러그인에 내장 폰트

  • 한나
  • 제주고딕
  • 제주 한라산
  • Ko Pub 바탕
  • 나눔 고딕
  • 나눔 바른 고딕 Light
  • 나눔 바른 고딕 Ultra light
  • 나눔 붓글씨
  • 나눔 스퀘어
  • 나눔 바른 고딕
  • 노트 산스
  • 스포카 한 산스

[플러그인] – [새로 추가] 메뉴를 통해 [Rocket Font]을 검색하여 설치합니다.

로켓폰트



플러그인을 활성화 후 관리 페이지에서 [설정] – [로켓 폰트] 를 클릭합니다. [폰트 설정]에서 한글 기본 폰트와 영문 기본 폰트를 선택합니다.

로켓폰트 플러그인 설정



[각 태그별 크기 및 글 간격 설정] 탭에서 폰트 설정을 적용할 항목을 활성화 시키고, 글자 크기와 줄간격을 조정합니다.

로켓 폰트 플러그인 설정



웹폰트 또는 플러그인을 설치하여 사용하게 되면 페이지의 로딩 속도가 느려집니다. 구글 검색 측면에서는 속도가 빠르게 좋겠지만, 개인적으로는 글이 깔끔할 때 더 잘 읽히기 때문에 폰트도 신경을 써야하는 부분 중 한가지라고 생각됩니다. 같은 글을 읽더라도 어떻게 표현하느냐에 따라 가독성이 많이 달라집니다.

[관련 글]  워드프레스 이런!해당 페이지를 찾을 수 없습니다 해결 방법

답글 남기기