워드프레스에서 코드 블록의 한글 폰트를 변경하는 방법

워드프레스에서 코드 블록을 가끔 사용하는데, 한글을 입력하면 영문 폰트와 달라 눈에 거슬릴 때가 있습니다. 이 글에서는 워드프레스에서 코드 블록의 한글 폰트를 변경하는 방법에 대해 알아보겠습니다.

워드프레스에서 코드 블록의 한글 폰트를 변경하는 방법

아래 그림은 제 블로그에서 코드 블록을 사용한 글입니다. 저만 그런지 모르겠지만, 보시는 것처럼 영문과 한글 폰트가 달라 보기 좋지 않습니다. 한동안은 그대로 사용했지만, 최근에 코드 블록을 많이 사용하다 보니 눈에 거슬려 영문과 한글 폰트가 같게 보이도록 변경했습니다. 이 글에서 그 방법을 자세히 설명해 드리겠습니다.

워드프레스에서 코드 블록의 영문과 한글의 폰트가 다릅니다. 코드 블록의 한글 폰트를 변경하는 방법을 알아보겠습니다

목차 숨기기

워드프레스에서 코드 블록의 한글 폰트를 변경하는 방법

1. 웹 폰트용 무료폰트 다운로드 받기

2. 다운로드 한 폰트를 서버에 업로드하기

3. 코드 블록 폰트 변경을 위한 코드 작성 및 적용하기

4. 적용결과 확인하기

1. 웹 폰트용 무료폰트 다운로드 받기

윈도우에서 사용하는 폰트와 웹에서 사용하는 폰트는 조금 다릅니다. 일반적으로 다음과 같이 구분됩니다.

일반 폰트 : TTF(TrueType Font), OTF(OpenType Font) 등
웹 폰트 : WOFF(Web Open Font Format), WOFF2, EOT(Embedded OpenType) 등 웹에 최적화된 형식

일반 폰트의 경우 용량이 커서 웹에서 사용하기에는 부적합하기 때문에, 이를 브라우저에서 호환되고 용량을 줄인 것이 웹 폰트입니다. 예를 들어, 제가 사용할 스포카 한 산스 폰트의 TTF 형식은 용량이 13MB이지만, 웹 폰트 형식인 WOFF는 200KB로 1/7 정도의 용량밖에 되지 않습니다.

스포카 한 산스 네오 폰트는 아래와 같이 모든 사용자자가 무료로 사용할 수 있는 폰트입니다.

아래 링크를 클릭하여 사이트로 이동한 후, 화면을 아래로 스크롤하여 ‘모두 내려받기’를 클릭하면 스포카 한 산스 네오 폰트를 다운로드할 수 있습니다.

스포카 폰트 다운로드 사이트 들어가기

‘모두 내려받기’를 통해 내려받은 파일의 압축을 풀면 아래와 같이 여러개의 폴더와 파일이 생성됩니다. 이 중에서 SpoqaHanSansNeo_TTF_subset 폴더에 있는 SpoqaHanSansNeo-Regular.woff 와 SpoqaHanSansNeo-Regular.woff2 폰트 파일을 사용하도록 하겠습니다.

2. 다운로드 한 폰트를 서버에 업로드하기

웹 폰트를 사용하기 위해서는 사용하는 테마의 하위 디렉토리에 fonts 디렉토리를 생성한 후 위의 2개 폰트파일을 업로드해야 합니다.

제가 사용 중인 AWS Lightsail에서 fonts 디렉토리를 생성하기 위해 파일질라 FTP 클라이언트를 사용해 보았지만, 파일 쓰기 권한이 없어서 SSH 터미널을 통해 fonts 디렉토리를 생성하였습니다.

fonts 디렉토리와 폰트 파일의 위치는 다음과 같습니다.

wp-content/
└── themes/
    └── your-current-theme/
        ├── style.css
        ├── functions.php
        └── fonts/
            ├── SpoqaHanSansNeo-Regular.woff
            └── SpoqaHanSansNeo-Regular.woff2

SSH 터미널에서 아래 명령을 실행하여 fonts 디렉토리를 생성합니다. 저는 OnePress 테마를 사용하고 있기 때문에 아래와 같이 작업을 진행했지만, 다른 테마를 사용 중이라면 onepress를 여러분의 테마명으로 변경하여 명령어를 실행하시면 됩니다. 여기서 주의하실 점은 자식 테마를 사용하더라도 fonts 디렉토리는 부모 테마 하위에 생성해야 합니다.

cd ~/stack/wordpress/wp-content/themes/onepress
sudo mkdir fonts
ls -l
sudo chmod 775 fonts
sudo chown daemon:daemon fonts
ls -l

아래는 SSH 터미널에서 위의 명령어를 차례대로 실행한 화면입니다.

다음으로 파일질라를 이용하여 폰트파일을 서버에 업로드합니다. 파일질라 사용법은 아래 링크를 참고하시기 바랍니다.

FTP로 AWS Lightsail 서버에 파일 업로드하기

파일질라로 서버에 접속한 후, 아래와 같이 SpoqaHanSansNeo-Regular.woff 와 SpoqaHanSansNeo-Regular.woff2 2개의 폰트를 서버로 업로드합니다.

폰트 업로드가 완료되었다면, SSH 터미널로 돌아가서 방금 업로드한 폰트 파일을 테마 디렉토리 하위에 생성한 fonts 디렉토리로 이동시킵니다.

ls -l Spo*
sudo mv Spo* ~/stack/wordpress/wp-content/themes/onepress/fonts
cd ~/stack/wordpress/wp-content/themes/onepress/fonts
ls -l
sudo chown daemon:daemon *
ls -l
sudo chmod 644 *
ls -l

아래는 SSH 터미널에서 위의 명령어를 차례대로 실행한 화면입니다.

3. 코드 블록 폰트 변경을 위한 코드 작성 및 적용하기

자, 이제 사용할 폰트 준비가 완료되었습니다. 다음으로 코드 블록에 원하는 폰트를 적용하는 코드를 작성해 보겠습니다. 아래에는 두 개의 함수가 포함되어 있는데, 각각의 역할은 다음과 같습니다.

add_custom_code_block_styles 함수 : 코드 블록에 사용할 SpoqaHanSansNeo-Regular 폰트를 웹 폰트로 등록하고, 코드 블록에 커스텀 스타일을 적용하는 역할을 합니다.
wrap_korean_in_code_with_span 함수 : 코드 블록에서 한글을 감지하고, 한글이 포함된 코드 블록에 korean 클래스를 추가하는 역할을 합니다.

// 코드 블록의 폰트 변경
function add_custom_code_block_styles() {
    $custom_css = "
        @font-face {
            font-family: 'SpoqaHanSansNeo-Light';
            src: url('" . get_template_directory_uri() . "/fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'),
                 url('" . get_template_directory_uri() . "/fonts/SpoqaHanSansNeo-Light.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
        }
        .wp-block-code {
            font-family: 'Consolas', 'Courier New', monospace !important;
            font-size: 14px;
            line-height: 1.5;
            background-color: #f4f4f4;
            padding: 16px;
            border-radius: 4px;
        }
        .wp-block-code code {
            font-family: inherit;
        }
        .wp-block-code span.korean {
            font-family: 'SpoqaHanSansNeo-Light', monospace !important;
        }
        @media (max-width: 768px) {
            .wp-block-code {
                font-size: 13px;
                padding: 11px;
            }
        }
    ";
    wp_add_inline_style( 'wp-block-library', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'add_custom_code_block_styles' );

function wrap_korean_in_code_with_span($content) {
    return preg_replace_callback(
        '/(<code[^>]*>)(.*?)(<\/code>)/s',
        function ($matches) {
            $korean_wrapped = preg_replace('/([\x{1100}-\x{11FF}\x{3130}-\x{318F}\x{A960}-\x{A97F}\x{AC00}-\x{D7A3}\x{D7B0}-\x{D7FF}]+)/u', '<span class="korean">$1</span>', $matches[2]);
            return $matches[1] . $korean_wrapped . $matches[3];
        },
        $content
    );
}

add_filter('the_content', 'wrap_korean_in_code_with_span', 20);

위에서 작성한 코드가 정상적으로 작동하기 위해서는 functions.php의 맨 밑에 코드를 추가해야 합니다.

워드프레스 관리자 화면에서 ‘디자인’ → ‘테마 파일 편집기’ 로 이동한 다음, 오른쪽에 있는 functions.php 를 클릭하고, 위의 코드를 맨 밑에 추가합니다.

코드 추가가 완료되면 ‘파일 업데이트’를 클릭하여 적용합니다.

작성한 코드를 functions.php에 붙여넣기 한 후 파일 업데이트를 클릭하여 적용시킵니다

4. 적용결과 확인하기

위의 작업으로 코드 블록의 폰트를 변경하는 작업이 완료되었으니, 이제 결과를 확인해 보겠습니다.

아래는 코드 블록의 한글 폰트를 변경한 결과 화면입니다. 이 글의 첫 번째 그림에 보이는 코드 블록의 폰트와 확연히 다를 뿐만 아니라, 훨씬 보기 좋은 것을 알 수 있습니다.

오늘은 워드프레스에서 코드 블록의 한글 폰트를 변경하는 방법에 대해 자세히 알아보았습니다. 코드 블록을 자주 사용하지 않는 분들에게는 이 글이 필요 없을 수 있지만, 자주 사용하시는 분들이라면 내용을 참고하여 적용해 보시면 좋을 것 같습니다.