워드프레스에 아리따 웹폰트 적용하기

선택Which Way

워드프레스에 글꼴을 넣는 방법은 여러 갈래인데, 상황에 따라 적절한 것이 다릅니다. 먼저 어느 쪽이 맞는지 정하세요.

방법	적합한 경우	테마 업데이트
추가 CSS	지금 바로 적용해 보고 싶을 때	안전
자식 테마 `functions.php`	제대로 운영하는 사이트	안전
`theme.json`	블록 테마에서 편집기 선택 목록에 넣을 때	자식 테마 필요

부모 테마의 파일은 직접 고치지 마세요. 테마가 업데이트되면 수정한 내용이 사라집니다. 아래 세 방법은 모두 이 문제를 피해 갑니다.

가장 빠른 방법Additional CSS

관리자 화면 왼쪽 메뉴의 Appearance > 사용자 정의하기 > 추가 CSS로 들어가 아래 내용을 붙이면 바로 적용됩니다. 파일을 건드리지 않으므로 테마 업데이트에도 안전하고, 마음에 안 들면 지우면 됩니다.

Appearance의 한국어 표기는 버전마다 바뀌었습니다. '모양', '외모', '외관', '디자인' 중 하나로 보일 수 있으니 위치로 찾으세요. 알림판 · 글 · 미디어 · 페이지 · 댓글 다음에 오는 항목입니다.

/* Appearance > 사용자 정의하기 > 추가 CSS */
@import url("https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-dotum-dynamic-subset.css");

body,
button,
input,
select,
textarea {
  font-family: "Arita Dotum KR", sans-serif;
  font-weight: 500;
}

body만 지정하면 버튼과 입력 칸은 브라우저 기본 글꼴로 남습니다. 폼 요소는 font-family를 상속하지 않기 때문에 위처럼 함께 나열해야 합니다.

다른 서체를 쓰려면 URL과 font-family를 함께 바꿉니다. 본문용 명조 계열이 필요하면 부리를 쓰세요.

서체	`font-family`	CSS 파일명
아리따 돋움	`Arita Dotum KR`	`arita-dotum-dynamic-subset.css`
아리따 부리	`Arita Buri KR`	`arita-buri-dynamic-subset.css`
아리따 산스 로마자	`Arita Sans LTN`	`arita-sans-ltn-dynamic-subset.css`
아리따 흑체 중문 간체	`Arita Sans SC`	`arita-sans-sc-dynamic-subset.css`

추가 CSS의 @import는 테마 스타일시트를 받은 뒤에야 글꼴 요청이 시작되므로 한 단계 늦습니다. 속도가 중요하면 다음 방법을 쓰세요.

권장 방법Child Theme

자식 테마의 functions.php에서wp_enqueue_style()로 등록하세요. 워드프레스가 의도한 방식입니다. 스타일시트가 <head>에 직접 들어가므로@import보다 빠르고, 캐시 플러그인이나 다른 플러그인이 의존 관계를 올바르게 인식합니다.

<?php
// 자식 테마의 functions.php

function arita_enqueue_webfont() {
  wp_enqueue_style(
    'arita-dotum',
    'https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-dotum-dynamic-subset.css',
    array(),
    null // CDN URL에 이미 버전이 있어 ?ver= 접미사를 붙이지 않는다
  );
}
add_action( 'wp_enqueue_scripts', 'arita_enqueue_webfont' );

네 번째 인자에 null을 넘긴 이유가 있습니다. 이 값을 비워 두면 워드프레스가 ?ver=6.x 같은 접미사를 URL에 붙이는데, CDN URL은 이미 @1.0.1으로 버전이 고정되어 있어 접미사가 캐시 적중률만 떨어뜨립니다.

연결을 미리 열어 두기

글꼴이 다른 출처에서 오므로 DNS 조회와 TLS 연결이 새로 필요합니다. 워드프레스의 wp_resource_hints 필터로preconnect를 추가하면 이 과정이 HTML 파싱과 겹쳐 진행됩니다.

<?php
// 글꼴 요청을 앞당기는 연결 힌트

function arita_resource_hints( $hints, $relation_type ) {
  if ( 'preconnect' === $relation_type ) {
    $hints[] = array(
      'href'        => 'https://cdn.jsdelivr.net',
      'crossorigin' => 'anonymous',
    );
  }
  return $hints;
}
add_filter( 'wp_resource_hints', 'arita_resource_hints', 10, 2 );

preload는 넣지 마세요. 글자 단위 분할에서는 어떤 조각이 필요한지 브라우저가 렌더링 시점에 판단하므로, 미리 지정한 조각이 실제로는 쓰이지 않아 헛된 요청이 됩니다. 원리는한글 웹폰트 용량 줄이기 문서에 있습니다.

편집기Editor

위 방법은 방문자가 보는 화면에만 적용됩니다. 글을 쓰는 편집기 화면은iframe 안에서 별도로 그려지므로 글꼴을 따로 넣어야 작성 중에도 실제 모습을 볼 수 있습니다.

<?php
// 블록 에디터 화면에도 같은 글꼴을 적용한다

function arita_enqueue_editor_webfont() {
  wp_enqueue_style( 'arita-dotum-editor', 'https://cdn.jsdelivr.net/npm/@bepyan/arita@1.0.1/dist/dynamic-subset/arita-dotum-dynamic-subset.css', array(), null );
}
add_action( 'enqueue_block_assets', 'arita_enqueue_editor_webfont' );

블록 테마의 글꼴 선택 목록에 추가하기

블록 테마(Twenty Twenty 시리즈 등)를 쓰면 theme.json에 등록해 편집기의 글꼴 선택 목록에 아리따를 띄울 수 있습니다. 그러면 글마다 서체를 골라 씁니다.

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "\"Arita Dotum KR\", sans-serif",
          "name": "아리따 돋움",
          "slug": "arita-dotum"
        },
        {
          "fontFamily": "\"Arita Buri KR\", serif",
          "name": "아리따 부리",
          "slug": "arita-buri"
        }
      ]
    }
  },
  "styles": {
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--arita-dotum)",
      "fontWeight": "500"
    }
  }
}

"version": 3은 워드프레스 6.6 이상에서 쓸 수 있습니다. 더 낮은 버전이면 2로 두세요. 그리고theme.json은 글꼴 이름만 등록합니다. 실제 폰트 파일을 불러오는 일은 여전히 wp_enqueue_style()이 해야 하므로 두 작업을 함께 하세요. fontFace 항목으로 직접 선언할 수도 있지만, 조각이 수십 개인 분할 방식에는 맞지 않습니다.

점검Troubleshooting

적용했는데 화면이 그대로다

캐시 플러그인(WP Rocket, W3 Total Cache, LiteSpeed Cache 등)이 이전 화면을 내보내고 있을 가능성이 큽니다. 플러그인의 캐시를 비우고 브라우저도 강제로 새로 고치세요. 호스팅 자체의 캐시나 Cloudflare를 함께 쓴다면 그쪽도 비워야 합니다.

테마 글꼴이 아리따를 덮어쓴다

테마나 페이지 빌더가 더 구체적인 선택자로 글꼴을 지정하면 그쪽이 이깁니다. Elementor처럼 전역 글꼴 설정을 가진 도구는 관리자 화면에서전역 글꼴을 아리따로 바꾸는 것이 먼저이고, 그래도 안 되면 선택자를 구체적으로 적어 우선순위를 높이세요.

/* Elementor 전역 글꼴이 덮어쓸 때: 커스텀 CSS에서 우선순위를 높인다 */
body.elementor-page,
body.elementor-page .elementor-widget-text-editor,
body.elementor-page h1,
body.elementor-page h2,
body.elementor-page h3 {
  font-family: "Arita Dotum KR", sans-serif !important;
}

!important는 마지막 수단입니다. 먼저 개발자 도구에서 어떤 규칙이 이기고 있는지 확인하고, 가능하면 테마 설정에서 해결하세요.!important를 남기면 나중에 글꼴을 바꿀 때 원인을 찾기 어려워집니다.

굵기가 의도와 다르게 보인다

아리따가 제공하는 굵기는 100·300·500·600·700이고 400은 없습니다. 테마가 font-weight: 400을 지정하면 브라우저가 매칭 규칙에 따라 500으로 대체하고, 800이나 900은 700으로 그립니다. 본문에는 500, 제목에는 600이나 700을 명시하세요.

플러그인 없이 하는 게 맞나

글꼴 관리 플러그인을 쓰면 관리자 화면에서 클릭으로 처리할 수 있지만, 플러그인 대부분은 폰트 파일을 서버에 올려 통짜로 내보냅니다. 돋움 한 굵기가 769KB, 부리가 1.5MB인 만큼 페이지가 무거워집니다. 위 방법은 코드 몇 줄로 같은 일을 하면서 실제 쓰인 글자가 속한 조각만 받습니다.