구글 폰트 로컬 호스팅으로 외부 의존성을 제거하고 속도를 높입니다

구글 폰트 로컬 호스팅으로 속도 개선을 시도한 계기는 GTmetrix Waterfall을 분석하다가 구글 폰트 API 서버(fonts.googleapis.com, fonts.gstatic.com) 응답을 기다리는 데 400~600ms가 소모되는 것을 발견했을 때였습니다. 한국에서 구글 서버에 요청하는 것이라 레이턴시가 생기는 것입니다. 폰트를 자체 서버에서 제공하면 이 지연을 없앨 수 있습니다. 또한 EU GDPR 관점에서도 외부 서버로 방문자 IP가 전송되는 것을 막을 수 있습니다.

구글 폰트 다운로드

Google Fonts 헬퍼 사이트(google-webfonts-helper.herokuapp.com)를 이용하면 원하는 폰트를 쉽게 다운로드할 수 있습니다.

1. 사이트에서 폰트 검색 (예: Noto Sans KR)
2. 사용할 subset 선택 (korean)
3. weight 선택 (400, 700 등)
4. “Best Support” 선택 → 폰트 파일 다운로드 (.woff, .woff2)

폰트 파일 서버에 업로드

다운로드한 파일을 테마 폴더 또는 uploads 폴더에 업로드합니다.

wp-content/themes/your-theme/fonts/
├── noto-sans-kr-v36-korean-regular.woff2
├── noto-sans-kr-v36-korean-regular.woff
├── noto-sans-kr-v36-korean-700.woff2
└── noto-sans-kr-v36-korean-700.woff

CSS에서 @font-face 선언

자식 테마의 style.css 또는 functions.php에 추가합니다.

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/noto-sans-kr-v36-korean-regular.woff2') format('woff2'),
         url('fonts/noto-sans-kr-v36-korean-regular.woff') format('woff');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/noto-sans-kr-v36-korean-700.woff2') format('woff2'),
         url('fonts/noto-sans-kr-v36-korean-700.woff') format('woff');
}

body {
    font-family: 'Noto Sans KR', sans-serif;
}

font-display: swap은 폰트 로드 중에도 대체 폰트로 텍스트를 먼저 표시해서 레이아웃 시프트를 줄입니다.

기존 구글 폰트 호출 제거

테마나 플러그인이 여전히 구글 폰트를 외부에서 불러온다면 제거합니다.

// functions.php에 추가 — 구글 폰트 로드 제거
add_action('wp_print_styles', function() {
    wp_dequeue_style('google-fonts'); // 핸들명은 테마마다 다를 수 있음
});

적용 후 GTmetrix로 구글 폰트 외부 요청이 사라졌는지 확인합니다.