WordPress 글꼴 직접 호스팅: 파일, 라이선스, 로딩 속도

예쁜 중국어 글꼴로 바꾸었더니 홈페이지가 잠시 비거나 글 속 이름만 다른 글꼴로 보일 수 있습니다. 글꼴 문제는 디자인뿐 아니라 다운로드 용량, 누락된 글리프, 레이아웃 안정성과도 관련됩니다. 직접 호스팅은 사이트가 글꼴 파일을 직접 제공한다는 뜻이지, 파일을 옮기기만 하면 반드시 빨라진다는 뜻은 아닙니다.

우선 본문 글꼴 한 가지와 필요한 제목 굵기만 일부 페이지에서 시험한 뒤 전체 사이트로 확대할지 결정하세요. 아래에서는 라이선스, 파일, WordPress 설정, 방문자 화면의 검증 순서로 지속해서 관리할 수 있는 방법을 설명합니다.

방문자에게 글꼴 파일을 제공할 권한부터 확인하기

컴퓨터에 글꼴을 설치할 수 있다고 해서 브라우저 다운로드용으로 사이트에 업로드할 수 있는 것은 아닙니다. 공식 출처, 라이선스 문구, 저작자, 버전을 보관하고 웹 사용, 직접 호스팅, 필요한 수정이 허용되는지 확인하세요. 상용 글꼴에는 도메인, 트래픽, 요금제 조건이 추가될 수 있으므로 실제 계약을 따릅니다.

예를 들어 SIL Open Font License는 웹 글꼴 사용과 배포를 허용하지만 배포 파일에는 필요한 라이선스 및 저작권 고지가 남아 있어야 합니다. 예약된 이름이 있는 글꼴을 수정할 때는 명칭에 관한 조건도 적용됩니다. 무료로 다운로드할 수 있다는 이유만으로 마음대로 이름을 바꾸거나 재판매할 수 있다고 생각하지 마세요.

사이트 전체에 맞춤 글꼴이 정말 필요한지도 결정하세요. 브랜드 특색을 제목에만 주면 된다면 본문은 시스템 글꼴을 사용해 다운로드와 유지보수를 줄일 수 있습니다. 시스템 글꼴은 기기에 따라 조금 달라 보일 수 있으므로 가독성은 시험해야 하지만, 방문자마다 완전한 중국어 본문 글꼴을 추가로 내려받을 필요는 없습니다.

필요한 형식, 굵기, 문자 고르기

웹에서는 WOFF2를 우선 검토하되 지원 대상 브라우저의 요건을 확인하세요. 데스크톱용 대형 파일을 모두 올리고 모든 굵기를 함께 로드하지 마세요. 본문, 제목, 버튼에 쓸 서체를 정리하고, 소수의 파일로 충분하다면 구성을 단순하게 유지합니다.

중국어 글꼴에는 많은 문자가 들어 있습니다. 서브셋으로 용량을 줄일 수 있지만 실제 콘텐츠에 맞는 범위가 필요합니다. 현재 홈페이지에 보이는 글자만 남기면 다음 글, 사람 이름, 주소, 방문자 댓글에서 글리프가 빠질 수 있습니다. 동적 콘텐츠가 많은 사이트는 당장의 최소 파일만 추구하지 말고 유지 가능한 문자 범위 전략이나 적절한 분할 방식을 사용하세요.

가변 글꼴은 한 파일에 여러 굵기 등의 변화를 담을 수 있지만 실제 크기와 사용 범위를 비교해야 합니다. 쓰지 않는 범위가 자동으로 비용 없이 제공되는 것은 아닙니다. 보통과 굵게만 필요하다면 두 방식을 측정하고 새 형식이라는 이유만으로 더 빠르다고 판단하지 마세요.

WordPress 글꼴 라이브러리로 파일 관리하기

현재 WordPress 글꼴 라이브러리 문서는 '모양' 아래의 Fonts를 진입 경로로 안내하고, 새 버전에서는 블록 테마와 클래식 테마를 지원한다고 설명합니다. 이전 버전에서는 사이트 편집기의 스타일과 타이포그래피에서 글꼴을 관리해야 할 수 있습니다. WordPress 버전과 테마 지원 상태를 확인한 다음 해당 메뉴를 찾으세요.

글꼴 라이브러리의 Upload 탭에서 사용 허가를 확인한 파일을 올리거나, Install Fonts에서 필요한 Google Fonts 글꼴과 변형을 선택합니다. 공식 설명에 따르면 설치 과정에서 글꼴을 다운로드하여 사이트에서 로컬로 제공합니다. 다른 플러그인이 보내는 기존 외부 글꼴 요청은 별도로 점검해야 합니다.

설치가 끝나면 필요한 본문, 제목, 블록에 적용하고 저장한 뒤 공개 페이지를 확인하세요. 목록에 글꼴이 있다는 것만으로 모든 페이지에 적용된 것은 아닙니다. 클래식 테마나 페이지 빌더를 쓴다면 글꼴 메뉴와 전역 설정이 같은 데이터를 참조하는지 확인합니다.

1. 글꼴 출처, 라이선스, 필요한 변형을 기록하고 현재 스타일을 백업합니다.
2. 해당 글꼴 라이브러리 메뉴에서 업로드하거나 설치하고 목록에 나타나는지 확인합니다.
3. 대표 페이지에 먼저 적용하고 공개 화면의 텍스트가 의도한 글꼴인지 검증합니다.

CSS가 필요하면 선언과 적용을 따로 확인하기

수동으로 설정할 때는 관리자가 지속해서 관리할 수 있는 스타일시트에 @font-face를 추가하고 이름, 파일 URL, 굵기, 스타일을 지정합니다. 그런 다음 font-family로 대상 텍스트에 적용합니다. 선언만 있고 사용하는 요소가 없다면 화면이 바뀌었다고 볼 수 없습니다. 업데이트로 덮어쓸 테마 핵심 파일을 직접 수정하지도 마세요.

방문자가 파일 URL에 접근하고 올바른 콘텐츠를 받아야 합니다. 파일을 다른 도메인의 CDN으로 옮기면 교차 출처 설정도 확인하세요. 브라우저 네트워크 패널에서 파일 누락이나 다운로드 실패를 찾고 계산된 스타일을 살펴보세요. 글꼴 이름만 반복해서 바꾸는 것으로는 원인을 찾기 어렵습니다.

font-display는 글꼴 다운로드 중 텍스트가 보이는 방식을 바꿉니다. swap을 사용하면 대체 글꼴로 먼저 표시할 수 있지만 교체 시 줄바꿈과 레이아웃이 달라질 수 있습니다. 적절한 fallback 글꼴을 준비하고 웹 글꼴을 불러오지 못해도 제목, 버튼, 본문을 읽을 수 있는지 시험하세요.

호스팅 위치만 보지 말고 실제 다운로드를 비교하기

직접 호스팅하면 글꼴 제공업체와의 연결을 줄일 수 있지만 속도는 자체 서버, 캐시, 파일 크기, 전송 방식에 따라 달라집니다. Google의 web.dev 문서도 직접 호스팅이 외부 서비스보다 반드시 빠르지는 않다고 설명합니다. 분할되고 압축된 외부 글꼴을 거대한 단일 파일로 바꾸면 오히려 느려질 수 있습니다.

같은 페이지와 기기 조건에서 첫 로딩과 캐시가 있는 로딩을 각각 살펴보세요. 글꼴 요청 수, 총 다운로드량, 텍스트를 읽을 수 있는 시점, 로딩 후 눈에 띄는 이동을 기록합니다. 다른 최적화에 앞서 중복 다운로드와 불필요한 굵기를 줄이세요.

모든 글꼴을 preload하지 마세요. preload는 리소스를 미리 가져오지만 중요한 이미지나 스타일의 다운로드와 경쟁할 수 있습니다. 특히 분할된 중국어 글꼴에서는 담당자가 실제로 필요한 파일을 파악해야 합니다. 먼저 측정하고 사전 로딩 대상을 결정하세요.

대만에서 흔한 콘텐츠로 글리프 누락과 레이아웃 검증하기

번체 중국어 문장부호, 사람 이름, 주소, 영어, 숫자, 기호가 포함된 대표 페이지를 준비하고 네모 표시, 이상한 글리프, 들쭉날쭉한 굵기를 확인하세요. 사이트에 일본어 등 다른 언어가 있다면 fallback 조합도 점검합니다. 짧은 브랜드 문구 하나만으로 글꼴 전체의 적합성을 판단할 수 없습니다.

휴대전화에서는 긴 제목의 줄바꿈, 버튼 넘침, 좁아진 표 열을 살펴보고 글자를 키워도 읽을 수 있는지 확인하세요. 지속해서 갱신되는 글에는 빠진 글리프를 신고할 방법을 남기세요. 새 문자가 추가되면 서브셋 생성 절차도 점검해 글을 올릴 때마다 급히 파일을 보완하지 않도록 합니다.

인수인계 시 글꼴 위치, 라이선스, 적용 범위, 서브셋 생성 방법, 마지막 시험 날짜를 기록합니다. 글꼴을 삭제하기 전 이를 사용하는 스타일과 페이지를 찾고 대체 글꼴을 확인한 뒤 필요 없어진 파일을 정리하세요. 디자인과 콘텐츠 유지보수를 함께 이어 갈 수 있어야 합니다.

사이트에 맞는 테마 선택하기

사이트를 지속해서 관리하는 점검 절차 만들기

• 튜토리얼
• 앱·소프트웨어
• 웹사이트·이커머스
• WordPress