- الردود: 2
- المشاهدات: 331
إضافة الخطوط الخارجية (Google Fonts) لمنتديات XenForo 2.x
تعتبر الخطوط من أهم عناصر الـ Modern UI في تصميم الويب. في هذا الشرح، سنتعلم كيفية ربط الخطوط الخارجية بمنتداك عبر قالب PAGE_CONTAINER وتطبيقها برمجياً لضمان مظهر احترافي وسرعة في التحميل.
🛠 المرحلة الأولى: جلب رابط الخط
بدايةً، عليك اختيار الخط المناسب من موقع Google Fonts أو أي مزود آخر.- اختر الأوزان المطلوبة (مثلاً: 400 للعادي و 700 للخط العريض).
- قم بنسخ الرابط المباشر الذي يوفره لك الموقع، وسيكون بهذا الشكل:
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
المرحلة الثانية: ربط الخط بالمنتدى
سنقوم الآن بوضع الرابط في الهيدر الرئيسي للموقع:- توجه إلى لوحة التحكم > المظهر > القوالب.
- ابحث عن قالب PAGE_CONTAINER.
- ابحث عن الوسم <head> وقم بلصق الكود الخاص بك أسفله مباشرة.
المرحلة الثالثة: تطبيق الخط عبر CSS
الآن سنستخدم قالب extra.less لتعميم الخط على كافة عناصر المنتدى بلمسة واحدة:- ابحث عن قالب extra.less وأضف الكود التالي:
/* تعيين الخط لكافة نصوص المنتدى - كود نت */
body, i, b, span, div, p, a, .p-nav-list, .p-title-value {
font-family: 'Cairo', sans-serif !important;
}
/* تحسين مظهر العناوين */
h1, h2, h3, h4 {
font-family: 'Cairo', sans-serif !important;
font-weight: 700;
}
نصائح من "كود نت" لتحسين الأداء (SEO)
- السرعة: لا تقم باستدعاء أكثر من خطين، لأن ذلك يؤثر على سرعة استجابة الموقع في محركات البحث.
- التوافق: استخدم خاصية &display=swap في نهاية رابط الخط لضمان ظهور النص فوراً للمستخدم بخط احتياطي حتى يكتمل تحميل الخط الأساسي.
- الأوزان: اختر فقط الأوزان التي تحتاجها فعلياً لتقليل حجم البيانات المحملة.
تم إعداد هذا الشرح بواسطة: مهدي حميد
حقوق النشر محفوظة لـ: كود نت - Code Net
