Divi 테마에서 한글 폰트 다루기

지난 번에 Divi 테마 사용법을 소개하면서 디폴트 폰트를 변경하는 부분을 가볍게 언급하고 지나 갔는데 아무래도 약간의 보충 설명이 필요할 것 같아 간단하게 따로 정리합니다.

Divi 테마 간단 사용법

디폴트 폰트 변경하기

워드프레스를 한글 모드로 한 상태로 Divi 테마를 설치하면 디폴트로 번역을 사용하도록 설정됩니다.

이 상태, 즉 번역이 활성화된 상태에서 디폴트 폰트는 배달의 민족 한나는11살체로 잡힙니다. 이 옵션을 끄면 Divi 테마의 디폴트 폰트인 Open Sans체로 변경되죠! 대신 관리자 메뉴들이 모두 영문으로 변경되는 ’부작용’이 따릅니다.

그럼 번역 사용을 끄지 않고 디폴트 폰트를 변경하는 방법은?

자식 테마의 functions.php 파일에서 한글 폰트 지정을 꺼버리면 디폴트 폰트인 Open Sans체로 돌아 갑니다.

function et_get_one_font_languages() { return null; }

여기까지는 앞서 사용법에서 이미 설명한 내용이죠.

그런데 아예 폰트를 특정 폰트로 변경하려면요? 예를 들어, 구글의 Noto Sans KR 폰트로 변경하려면?

functions.php 파일에서 앞선 코드 대신 다음과 같은 폰트 처리 루틴을 추가해 주면 됩니다. (앞 부분은 지우세요!)

function et_get_one_font_languages() {
    $one_font_languages['ko_KR'] = array(
        'language_name'   => 'Korean',
        'google_font_url' => '//fonts.googleapis.com/earlyaccess/notosanskr.css',
        'font_family'     => "'Noto Sans KR', sans-serif",
    );
    return $one_font_languages;
}

※ 단, 이 때 유의할 점 한 가지는 이렇게 코드를 추가하고 나서 반드시 관리자 메뉴의 “Divi 테마 옵션”에서 “정적 CSS 파일 생성” 우측에 있는 “Clear” 버튼을 한번 꾹 눌러서 기존의 캐싱된 스타일을 삭제해 줘야 한다는 점! 잊지 마세요!

커스텀 CSS로 처리하기

또는, 이런 코드 추가 방법이 귀찮은 분들이라면 웹에서 통상적인 폰트 처리 방법을 따르면 되죠. “사용자 맞춤 CSS” 부분에서 다음과 같이 직접 CSS를 추가해 줘도 됩니다.

여기서는 나눔고딕(Nanum Gothic) 체를 한번 적용해 보았지만, 어떤 폰트든 원리는 똑같습니다.

@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
body, h1, h2, h3, h4, h5, h6, input, textarea, select {
    font-family: 'Nanum Gothic', sans-serif;
}

@import 방식이 마음에 걸리는 분들이라면 폰트 파일 로드 부분은 따로 워드프레스의 표준 로딩 방식인 wp_enqueue_scripts 후킹 방식으로 처리해도 되구요. (설명은 생략)

Divi 테마라고 해서 폰트 처리 방식이 특별히 다를 건 없습니다.

다만 Divi가 기본적으로 빌더 방식인데다 미쿡에서 만든 테마인지라 아무래도 한글에 대한 지원 부분은 조금 부족할 수 밖에 없습니다. 물론 디비 & 엑스트라 한글폰트 플러그인 같은 좋은 국산 플러그인이 무료로 나와 있어 가뭄에 단비 같이 공백을 메워 주기는 하죠.

하지만 간단하게 폰트 하나 바꾸는데 굳이 플러그인 두 개를 추가해야 한다는 게 어딘지 좀.. (왜 2개 냐구요? 설치해 보시면 압니다!^^)

그런 분들이라면 여기 소개하는 간단한 방법들도 한번 검토해 보세요! 🙂