셀프호스팅 워드프레스에 Pretendard 커스텀폰트 적용하기

먼저 폰트 등록 방법을 고르세요

WordPress 6.5에서 도입된 폰트 라이브러리는 7.0부터 클래식 테마에서도 전역으로 제공됩니다. 예전 글의 플러그인 경로부터 찾기 전에 현재 기본 기능을 확인하세요. 파일 등록만으로 Astra의 Customizer나 Elementor 위젯 설정까지 모두 바뀌는 것은 아닙니다.

Pretendard 파일을 고르는 기준

2026년 10월 23일 공식 최신 릴리스는 v1.3.9로 확인했습니다. 이후에는 릴리스 페이지에서 버전을 다시 확인하세요. 영문 전용 사이트에서 Pretendard가 필수인 것은 아닙니다. 이 글은 한영 혼용 사이트를 기준으로 하며, 라틴·그리스·키릴 문자 전용 환경에는 Pretendard Std가 따로 있습니다.

여러 파일로 나눈 동적 서브셋은 해당 CSS의 unicode-range와 상대 경로를 함께 유지해야 합니다. 조각 파일 하나를 전체 폰트처럼 등록하면 글자가 빠질 수 있습니다. 정적 서브셋 한 파일과 동적 서브셋 묶음을 같은 방식으로 취급하지 마세요.

ZIP을 풀고 쓸 파일을 먼저 확인한 뒤 작업 폴더에 복사하세요. 웹에 재배포할 때는 함께 제공된 LICENSE.txt와 SIL Open Font License 조건도 보존합니다. WOFF는 대상 브라우저가 요구할 때 추가하며, WOFF2와 항상 둘 다 올릴 필요는 없습니다.

등록한 폰트를 테마와 편집기에 적용하기

1. 현재 WordPress의 모양 → 폰트 또는 선택한 폰트 등록 기능에서 파일을 올립니다.
2. 정적 파일은 실제 굵기와 일치하게 등록합니다. Regular는 400, Bold는 700입니다. 가변 파일은 해당 기능이 가변 폰트를 지원하는지 먼저 확인합니다.
3. Astra를 사용한다면 Customizer의 본문·제목 Typography 설정에서 선택 여부를 확인합니다.
4. Elementor는 사이트 설정과 위젯의 개별 Typography를 확인합니다. 테마를 따르려는 경우에만 기본 글꼴 비활성화를 검토합니다. 색상 설정 변경은 필요하지 않습니다.
5. 편집기 미리보기와 로그아웃한 공개 화면에서 한글·영문·굵기를 비교합니다.

Custom Fonts는 별도 플러그인입니다. 설치돼 있지 않으면 그 메뉴가 나오지 않습니다. Elementor 자체 Custom Fonts 기능과도 구분하세요. UI 제공 여부와 요금제 조건은 현재 설치된 제품에서 확인해야 합니다.

CSS로 적용할 때는 범위를 좁히세요

아래는 정적 전체 WOFF2의 400·700 두 파일을 쓰는 예제입니다. 파일 URL을 실제 주소로 바꾼 뒤 테스트 글에서 확인하세요. DIH Pretendard는 기존 테마 선언과 충돌을 줄이기 위해 정한 CSS 별칭입니다.

@font-face {
  font-family: 'DIH Pretendard';
  src: url('/wp-content/uploads/fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DIH Pretendard';
  src: url('/wp-content/uploads/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.entry-content {
  font-family: 'DIH Pretendard', system-ui, sans-serif;
  font-weight: 400;
}
.entry-content :is(h2, h3, h4, strong, b) {
  font-weight: 700;
}

.entry-content는 예시 선택자입니다. Elementor가 다른 컨테이너를 사용하거나 위젯에 글꼴을 직접 지정했다면 실제 본문 선택자를 확인하세요. 모든 요소에 !important를 붙이면 코드·아이콘·폼까지 덮어쓸 수 있습니다. 관리 화면의 추가 CSS 위치도 테마·버전에 따라 다릅니다.

@font-face {
  font-family: 'DIH Pretendard Variable';
  src: url('/wp-content/uploads/fonts/pretendard/PretendardVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.entry-content {
  font-family: 'DIH Pretendard Variable', system-ui, sans-serif;
}

font-display: swap은 대체 글꼴로 먼저 표시한 뒤 교체할 수 있게 합니다. 글꼴 교체 때 줄바꿈이나 높이가 변할 수 있으므로 실제 화면의 레이아웃 이동을 확인하세요. 가변 폰트가 정적 폰트보다 항상 작거나 빠른 것은 아닙니다.

업로드 오류는 요청과 로그부터 확인하기

업로드가 실패하면 브라우저 Network에서 해당 요청의 상태와 응답 본문을 확인합니다. 미디어 업로드는 async-upload.php를 사용할 수 있지만, 기본 폰트 라이브러리와 플러그인은 다른 요청 경로를 쓸 수 있습니다. HTTP 200만 보고 성공으로 판단하지 마세요.

• 형식 오류: 파일의 출처·실제 형식, 현재 기능의 지원 확장자, 업로드 권한을 확인합니다.
• 403: 요청 시각·URI를 WAF·웹서버·보안 플러그인 기록과 맞춰 봅니다. 특정 ModSecurity 규칙 번호가 원인이라고 미리 단정하지 않습니다.
• 413·시간 초과: 프록시와 PHP 업로드/요청 크기 제한을 확인합니다.
• 업로드 뒤 표시 안 됨: 파일 URL의 404·MIME·CORS·캐시와 CSS의 실제 적용 여부를 확인합니다.

기존 글의 확장자만 보고 파일 검증 결과를 통과시키는 MU 예제와 ModSecurity 예외 복사 명령은 제거했습니다. 서버 보호 기능을 줄이는 조치는 오류 원인을 확인한 뒤 별도로 검토해야 합니다. 이 글을 따라 보안 검사를 끌 필요는 없습니다.

curl -I 'https://example.com/wp-content/uploads/fonts/pretendard/Pretendard-Regular.woff2'
curl -I -H 'Origin: https://www.example.com' \
  'https://fonts.example.com/Pretendard-Regular.woff2'

폰트 응답의 Content-Type: font/woff2와 실제 URL을 확인합니다. 출처가 다른 도메인에서 제공할 때는 CORS 응답도 확인하세요. 같은 출처에서 제공하는 폰트에 임의의 CORS 설정을 추가할 필요는 없습니다. 모든 출처를 허용하는 설정부터 넣지 말고 필요한 출처를 정합니다.

서버 관리자가 WP-CLI로 등록하는 경우

WP-CLI는 승인된 서버 관리 경로에서 미디어 첨부를 등록하는 대안입니다. WordPress의 파일 검사·플러그인·파일 권한 영향을 받으므로 업로드 제한을 무조건 우회하지는 않습니다. 설치는 공식 설치 안내를 따릅니다.

다음 예제는 별도로 준비한 작업 폴더에 Regular·Bold 파일이 있고, 실제 실행 계정이 apache인 경우입니다. PHP-FPM 계정은 웹서버 계정과 다를 수 있습니다. 계정·설치 경로·파일 경로를 바꾸고 접근 권한을 확인하세요. 원본을 공유 /tmp/fonts로 이동하거나 재귀적으로 소유권을 바꾸지 않습니다.

WP_ROOT=/var/www/html/wordpress
FONT_DIR=/srv/font-staging/pretendard
WP_USER=apache

sudo -u "$WP_USER" /usr/local/bin/wp core version --path="$WP_ROOT"
sudo -u "$WP_USER" test -r "$FONT_DIR/Pretendard-Regular.woff2"
sudo -u "$WP_USER" /usr/local/bin/wp media import \
  "$FONT_DIR/Pretendard-Regular.woff2" \
  "$FONT_DIR/Pretendard-Bold.woff2" \
  --path="$WP_ROOT" --porcelain

출력된 첨부 ID와 미디어 URL을 확인하고 폰트 등록 기능에서 파일을 연결합니다. 미디어 import만으로 글꼴 선택기에 등록되지는 않습니다. 재실행하면 중복 첨부가 생길 수 있으므로 기존 파일부터 확인하세요.

공개 화면에서 확인할 항목

1. DevTools의 실제 렌더링 글꼴에서 한글·영문·숫자가 의도한 파일을 사용하는지 확인합니다. Computed의 font-family만으로는 부족합니다.
2. Network에서 WOFF2 요청·응답·전송량을 확인합니다. 400·700을 모두 쓰는 문장을 테스트합니다.
3. 본문·제목·버튼·코드 블록과 PC·모바일 줄바꿈을 비교합니다. 코드와 아이콘이 바뀌지 않았는지 봅니다.
4. 테마·Elementor·캐시 플러그인의 관련 캐시를 정리하고 로그아웃 화면에서 다시 확인합니다.
5. preload는 첫 화면에서 실제 쓰는 파일만 검토합니다. 같은 파일 중복 요청과 불필요한 전체 한글 파일 선로딩을 피합니다.

문제가 생기면 적용한 CSS 또는 해당 폰트 선택을 이전 값으로 되돌리고 캐시를 갱신합니다. 파일 삭제부터 하면 다른 페이지의 글꼴도 깨질 수 있습니다.

확인에 사용한 공식 자료

• Pretendard releases · README / license
• WordPress Font Library
• Custom Fonts — Brainstorm Force
• WP-CLI: wp media import
• Elementor: variable fonts
• MDN: font-display · unicode-range