إصلاح اختفاء خطوط Google بعد تغيير النطاق في Elementor (دليل 2025)

هل غيّرت نطاق موقعك (أو نقلته من بيئة الاختبار إلى الإنتاج) وفجأة اختفت خطوط Google في Elementor؟ يقدّم هذا الدليل فحوصات سريعة وحلولاً دائمة لإعادة الخطوط كما يجب—وبسرعة.

الأعراض

عودة خطوط المتن/العناوين إلى الافتراضية (مثل Arial).
في Network ضمن أدوات المطوّر، طلبات fonts.gstatic.com أو fonts.googleapis.com محجوبة/404/محتوى مختلط.
يعرض Elementor أسماء العائلات الصحيحة، لكن الواجهة الأمامية لا تطبقها.

حل سريع (قائمة 5 دقائق)

إعادة توليد CSS والبيانات (Elementor → Tools → Regenerate CSS & Data).
مسح جميع الذاكرات المؤقتة (الملحق، الخادم، شبكة CDN، وتحديث المتصفح بقوة).
تحديث عنوان الموقع (WP Admin → Settings → General: WordPress Address وSite Address).
استبدال سلاسل النطاق القديم (CSS منشئ الصفحات، الويدجت، CSS المخصص، وقاعدة البيانات).
ضمان HTTPS لجميع طلبات الخطوط (لا محتوى مختلط).

الإصلاحات خطوة بخطوة

1) تحديث الملفات التي ينشئها Elementor

Elementor → Tools → Regenerate CSS & Data.
Elementor → Settings → Advanced:
- CSS Print Method: جرّب External File (المفضّل). إن استمرت المشكلة فجرّب Internal Embedding.
- Load Google Fonts: اتركه Yes إذا كنت تستخدم Google Fonts. (إن استضفت محلياً فاجعله No.)
امسح ذاكرات الملحق/الخادم/CDN المؤقتة.

2) إصلاح العناوين القديمة بعد تغيير النطاق

إذا نقلت old-domain.com → new-domain.com فقد يظل CSS الخاص بـ Elementor أو الخيارات المسلسلة يشير إلى النطاق القديم.

الخيار 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

ثم أعد توليد CSS في Elementor وامسح جميع الذاكرات المؤقتة.

الخيار B — الاستبدال في قاعدة البيانات عبر ملحق

استخدم أداة موثوقة للبحث/الاستبدال لتحديث جميع المواضع (بما في ذلك الويدجت، إعدادات القالب، وCSS الخاص بـ Elementor). خذ نسخة احتياطية أولاً.

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 مؤخراً، حدّث أي عناوين http:// ثابتة في القالب أو الويدجت.

4) التحقق من CORS للخطوط المستضافة محلياً

إذا استضفت الخطوط محلياً وتقدّم ملفات .woff2 من نطاقك أو CDN، فاسمح بتحميلها عبر النطاقات (cross-origin).

مثال .htaccess (Apache)

# السماح بخطوط الويب عبر النطاقات
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

5) التفكير في استضافة Google Fonts محلياً (أداء وتحكم)

الإيجابيات: بلا اتصالات خارجية، مستقر بعد تغييرات النطاق، تخزين مؤقّت أسهل. السلبيات: يجب تحديث الملفات عند تغيير العائلات/الأوزان.

نزّل العائلات/الأوزان اللازمة (مثل Google Webfonts Helper).
ارفعها إلى /wp-content/uploads/fonts/ (أو مجلد أصول القالب).
ضمّن ورقة أنماط محليّة وعرّف الخطوط في CSS.
في Elementor → Settings، غيّر Load Google Fonts إلى No لتجنّب التكرار.

استكشاف الأخطاء باستخدام DevTools

Network: فلتر “font”. ابحث عن 404/403 أو CORS أو عناوين قديمة مخزنة مؤقتاً.
Console: تحذيرات المحتوى المختلط، قيود CSP، أو أدوات الحجب.
Disable cache مفعّل وإعادة تحميل قوية.

نصائح الأداء

حمّل الأوزان/الأنماط اللازمة فقط (مثل 400/600).
استخدم preconnect لنطاقات Google Fonts.
أضف font-display: swap; (مضمّنة مع &display=swap).

الأسئلة الشائعة

س. هل يسبب تغيير النطاق تعطل خطوط Google في Elementor؟
ج. قد يحدث إذا بقيت عناوين قديمة في CSS المُولَّد أو كانت إعدادات HTTPS/CORS غير صحيحة. استبدل النطاقات وأعد توليد CSS وامسح الذاكرات المؤقتة.

س. أصلحت العناوين ولا تزال الخطوط لا تظهر.
ج. افحص التخزين المؤقت/CDN والمحتوى المختلط، وتأكد من عدم تعطيل Google Fonts في Elementor.

س. محلي أم عبر CDN من Google؟
ج. المحلي يمنح تحكمًا أكبر؛ CDN أبسط وتلقائي التحديث. تجنب التحميل المزدوج.

تحتاج مساعدة في ترحيل مواقع Elementor أو إصلاح مشاكل الخطوط بعد الترحيل؟ احصل على مساعدة: Contact We Design Orange →