Steel random fonts for printing
댓글 달기 / wordpress-ko / 글쓴이

도메인 변경 후 Elementor에서 Google Fonts가 사라졌을 때 해결하기 (2025 가이드)

사이트 도메인을 바꾸거나 스테이징 → 라이브로 이전했더니, Elementor에서 사용하던 Google Fonts가 사라졌나요? 이 가이드는 빠른 점검과 영구적인 해결책을 제시해 타이포그래피를 즉시 복구하도록 도와줍니다.

증상

  • 본문/헤딩 폰트가 기본값(예: Arial)로 되돌아감.
  • DevTools의 Network에서 fonts.gstatic.com 또는 fonts.googleapis.com 요청이 차단/404/혼합 콘텐츠로 표시됨.
  • Elementor 편집기에는 올바른 폰트명이 보이지만, 프런트엔드에는 적용되지 않음.

퀵 픽스 (5분 체크리스트)

  1. Regenerate CSS & Data 실행 (Elementor → Tools → Regenerate CSS & Data).
  2. 모든 캐시 비우기 (플러그인, 서버, CDN, 브라우저 강력 새로고침).
  3. 사이트 URL 업데이트 (WP Admin → Settings → General: WordPress Address, Site Address).
  4. 구 도메인 문자열 일괄 교체 (빌더 CSS, 위젯, 커스텀 CSS, 데이터베이스).
  5. 모든 폰트 요청을 HTTPS로 (혼합 콘텐츠 제거).

단계별 해결

1) Elementor가 생성한 파일 재생성

  1. Elementor → Tools → Regenerate CSS & Data.
  2. Elementor → Settings → Advanced:
    • CSS Print Method: External File 권장. 문제 지속 시 Internal Embedding 시험.
    • Load Google Fonts: Google Fonts를 쓰면 Yes. (로컬 호스팅 시 No로 전환.)
  3. 플러그인/서버/CDN 캐시 삭제.

2) 도메인 변경 후 남은 구 URL 교체

old-domain.com → new-domain.com으로 이동했다면, Elementor CSS나 직렬화된 옵션에 구 도메인이 남아 있을 수 있습니다.

옵션 A — WP-CLI (빠르고 안전)
# 워드프레스 루트에서 실행
wp search-replace 'http://old-domain.com' 'https://new-domain.com' --all-tables --precise --report
wp search-replace 'https://old-domain.com' 'https://new-domain.com' --all-tables --precise --report

그다음 Elementor CSS를 다시 재생성하고, 캐시를 비우세요.

옵션 B — 플러그인으로 DB 검색/치환

신뢰할 수 있는 검색/치환 도구로 모든 항목을 갱신합니다(위젯, 테마 설정, Elementor CSS 포함). 먼저 백업을 권장합니다.

3) 혼합 콘텐츠 제거(HTTPS 강제)

Google Fonts 링크를 HTTPS로 통일하고, 렌더링 최적화를 위해 &display=swap을 추가하세요:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

최근에 SSL을 적용했다면, 테마/헤더 코드나 HTML 위젯에 하드코딩된 http:// 폰트 URL을 업데이트하세요.

4) 로컬 폰트 CORS 확인

로컬로 폰트를 호스팅하고 .woff2를 도메인/CDN에서 서빙한다면, 교차 출처 로딩을 허용해야 합니다.

.htaccess 예시 (Apache)
# 웹폰트 cross-origin 허용
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

5) Google Fonts 로컬 호스팅 고려 (성능/제어)

장점: 외부 호출 없음, 도메인 변경 후 안정적, 캐싱 수월. 단점: 가족/가중치 변경 시 파일 갱신 필요.

  1. 필요한 가족/가중치를 다운로드(예: Google Webfonts Helper).
  2. /wp-content/uploads/fonts/ 등으로 업로드.
  3. 로컬 스타일시트를 등록하고 CSS에서 폰트를 참조.
  4. Elementor → Settings에서 Load Google Fonts를 No로 설정(중복 로드 방지).

DevTools로 트러블슈팅

  • Network: “font”로 필터링. 404/403, CORS 차단, 구 도메인 URL 캐시 확인.
  • Console: 혼합 콘텐츠 경고, CSP, 차단기 간섭 확인.
  • Disable cache 활성화 후 강력 새로고침으로 재검증.

성능 팁

  • 필요한 가중치/스타일만 로드(예: 400/600).
  • Google Fonts 도메인에 preconnect.
  • font-display: swap; 사용(&display=swap 포함).

FAQ

Q. 도메인 변경이 Elementor의 Google Fonts를 깨뜨리나요?
A. 생성된 CSS에 구 URL이 남아 있거나 HTTPS/CORS 구성이 잘못되면 그럴 수 있습니다. 도메인 교체, CSS 재생성, 캐시 삭제를 진행하세요.

Q. URL을 고쳤는데도 폰트가 적용되지 않습니다.
A. 캐시/CDN, 혼합 콘텐츠를 확인하고, Google Fonts를 비활성화해두지 않았는지 점검하세요.

Q. 로컬 vs Google CDN 중 무엇이 좋나요?
A. 제어/일관성은 로컬, 간편함/자동 업데이트는 CDN이 유리합니다. 중복 로드는 피하세요.

Elementor 사이트 마이그레이션이나 폰트 이슈 정리에 도움이 필요하신가요? 전문가 지원: Contact We Design Orange →

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다