لكي تستضيف خطوط جوجل محليا في ووردبريس، نزل ملفات WOFF2 للعائلات والأوزان ومجموعات الحروف التي تستخدمها فقط، وارفعها إلى قالبك أو القالب الفرعي، وعرفها بـ @font-face مع font-display: swap، وحمل مسبقا خطا أو خطين ظاهرين أعلى الصفحة، وأوقف القالب والإضافات عن تحميل النسخة من fonts.googleapis.com.
نقلت موقعي إلى خطوط مستضافة محليا وأفعل ذلك في أغلب مواقع العملاء. وهذه هي الخطوات.
لماذا تستضيف خطوط جوجل محليا؟
الاستضافة المحلية تلغي الاتصال بنطاقين إضافيين (fonts.googleapis.com لملف CSS وfonts.gstatic.com للملفات)، وتمنحك تحكما في الكاش والتحميل المسبق، وتمنع إرسال عناوين IP للزوار إلى جوجل. ومنذ أن فصلت المتصفحات الكاش لكل موقع، لم تعد حجة “الزوار لديهم خطوط جوجل في الكاش” صالحة.
السرعة
مع النسخة المستضافة على جوجل يجب على المتصفح جلب HTML، ثم اكتشاف رابط CSS، ثم الاتصال بنطاق CSS لجوجل وتنزيله، ثم الاتصال بنطاق الخطوط وتنزيل الملفات. الاستضافة المحلية تحول هذه السلسلة إلى طلبات على اتصال مفتوح بالفعل مع نطاقك، وتتيح التحميل المسبق.
الخصوصية
في يناير 2022 حكمت محكمة إقليمية في ميونخ بأن موقعا يمرر عنوان IP للزائر إلى جوجل بتضمين خطوط جوجل دون موافقة قد خالف GDPR. ومنذ ذلك الحين يستضيف كثير من أصحاب المواقع الأوروبية الخطوط محليا. إذا كنت تخدم زوارا أوروبيين فهذا اختيار افتراضي منطقي، وللتفاصيل القانونية اسأل محاميا.
الخطوة 1: حدد ما تحتاجه فعلا
كل وزن ونمط ملف منفصل. راجع تصميمك:
- أي عائلات؟ واحدة أو اثنتان في الوضع المثالي.
- أي أوزان؟ غالبا 400 و700 تكفي، وربما 600 للعناوين.
- المائل؟ فقط إذا استخدمه التصميم فعلا.
- أي حروف؟ لاتينية، لاتينية موسعة، عربية؟ حمل المجموعات التي يحتاجها محتواك فقط.
الخطوط المتغيرة تستبدل عدة أوزان ثابتة بملف واحد، وغالبا يكون أصغر إجمالا عند استخدام ثلاثة أوزان أو أكثر.
الخطوة 2: نزل ملفات WOFF2
WOFF2 مدعوم في كل المتصفحات الحديثة وهو أكثر صيغ الخطوط ضغطا، فنادرا ما تحتاج غيره. الخيارات:
- نزل العائلة من Google Fonts وحولها، أو
- استخدم أداة مساعدة تولد ملفات WOFF2 وكود
@font-faceللأوزان والمجموعات المختارة.
راجع ملف ترخيص الخط، فأغلب خطوط جوجل تستخدم SIL Open Font License أو Apache License.
الخطوة 3: أضف الملفات إلى قالبك
ضعها في القالب الفرعي، مثلا assets/fonts/، حتى لا تحذفها تحديثات القالب. ثم عرفها:
@font-face {
font-family: "Inter";
src: url("../fonts/inter-latin-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}
@font-face {
font-family: "Inter";
src: url("../fonts/inter-latin-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
unicode-range يجعل المتصفح ينزل المجموعة فقط إذا احتوت الصفحة هذه الحروف، وهذا مهم للمواقع ثنائية اللغة عربي وإنجليزي.
الخطوة 4: حمل الخطوط الحرجة مسبقا
حمل مسبقا الخطوط المستخدمة في الشاشة الأولى فقط، عادة الوزن العادي لخط النص وربما وزن العناوين:
add_action( 'wp_head', function () {
printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "n",
esc_url( get_stylesheet_directory_uri() . '/assets/fonts/inter-latin-400.woff2' )
);
}, 1 );
سمة crossorigin مطلوبة في التحميل المسبق للخطوط حتى على نفس النطاق، وإلا ينزل المتصفح الخط مرتين. وتحميل خطوط كثيرة مسبقا ينافس صورة LCP.
الخطوة 5: احذف نسخ جوجل
هذه الخطوة التي ينساها الناس. ابحث في كود الصفحة عن fonts.googleapis.com وfonts.gstatic.com. المصادر تشمل:
- إعدادات الخطوط في القالب (كثير من القوالب فيها خيار “تحميل الخطوط محليا”).
- إعدادات الخطوط العامة في أدوات بناء الصفحات.
- إضافات مثل السلايدر والنماذج والخرائط التي تحمل خطوطها الخاصة.
أوقفها بالـ handle إن لم يوجد إعداد:
add_action( 'wp_enqueue_scripts', function () {
wp_dequeue_style( 'some-plugin-google-fonts' );
}, 100 );
تذكر حذف أي تلميحات preconnect لنطاقات خطوط جوجل بعد أن يتوقف التحميل منها.
الخطوة 6: الكاش
الخطوط نادرا ما تتغير، فقدمها بكاش طويل (Cache-Control: public, max-age=31536000, immutable) وغير اسم الملف أو الإصدار عند تحديثها. وتأكد أن CDN يحترم هذه الترويسات.
تقليل تحرك التصميم عند تبديل الخطوط
font-display: swap يتجنب النص المخفي لكنه قد يسبب قفزة ظاهرة عند استبدال الخط البديل، مما يؤثر على CLS. قلل ذلك بـ:
- خط بديل بأبعاد مشابهة.
size-adjustوascent-overrideوdescent-overrideعلى@font-faceللخط البديل لمطابقة مقاييس خط الويب.
الخطوط العربية
ملفات الخطوط العربية أكبر عادة لأنها تحتوي حروفا وأشكالا سياقية أكثر. قلل الحروف بقوة، وحمل أوزانا أقل، واختبر وضوح القراءة على الشاشات الصغيرة. راجع قائمة المتجر الإلكتروني العربي.
قائمة المراجعة
- تقليل العائلات والأوزان والمجموعات إلى المستخدم فقط
- ملفات WOFF2 في القالب الفرعي
@font-faceمعfont-display: swap- خط أو خطان حرجان محملان مسبقا مع
crossorigin - لا طلبات متبقية لنطاقات خطوط جوجل
- كاش طويل لملفات الخطوط
- ضبط مقاييس الخط البديل للحد من تحرك التصميم
أخطاء شائعة
- استضافة الثمانية عشر وزنا كلها “احتياطيا”.
- تحميل خطوط مسبقا لا تستخدم في الصفحة.
- ترك إضافة ما زالت تحمل النسخة المستضافة على جوجل.
- نسيان
crossoriginفي التحميل المسبق.
تحتاج مساعدة في تسريع ملفات قالبك؟ تواصل معي. التالي: تقليل Total Blocking Time.
الأسئلة الشائعة
هل استضافة خطوط جوجل محليا قانونية؟
خطوط جوجل منشورة بتراخيص مفتوحة أغلبها SIL Open Font License، وهي تسمح بالاستضافة الذاتية. راجع ترخيص كل عائلة خطوط تستخدمها.
هل الخطوط المستضافة محليا أسرع من خطوط جوجل؟
غالبا نعم، لأن المتصفح يتجنب الاتصال بنطاقات إضافية، والمتصفحات الحديثة لم تعد تشارك الخطوط المخزنة بين المواقع. والفرق يعتمد على استضافتك وإعدادك.
هل تساعد الاستضافة المحلية في GDPR؟
تحميل الخطوط من جوجل يرسل عناوين IP للزوار إلى جوجل، وقد رأت محكمة ألمانية في 2022 أن ذلك إشكالي دون موافقة، فصارت مواقع أوروبية كثيرة تستضيف الخطوط محليا. هذه ليست استشارة قانونية.
ما معنى font-display swap؟
يطلب من المتصفح عرض النص فورا بخط بديل ثم استبداله بخط الويب عند تحميله، فيتجنب النص المخفي.
