الخطوط العربية أثقل من نظيرتها اللاتينية بطبيعتها — عدد المحارف أكبر بسبب أشكال الحرف المختلفة (أول، وسط، آخر، منفصل)، وكل شكل يحتاج تصميماً مستقلاً.
هذا يخلق مفاضلة حقيقية: خط عربي جميل قد يكلفك ثانية من زمن التحميل، وهذا يؤثر على ترتيبك في البحث وعلى معدل بقاء الزائر.
هذا الدليل يشرح كيف تحصل على الاثنين.
الخطوط طبقة واحدة من التعريب. للصورة الكاملة — تخطيط RTL والأرقام والتواريخ وتكييف المحتوى — راجع الدليل الكامل لتعريب التطبيقات والمواقع.
لماذا الخط العربي أثقل؟
الحرف العربي يتغيّر شكله بحسب موقعه في الكلمة. حرف «ع» له أربعة أشكال، وكل شكل محرف مستقل في ملف الخط. أضف إلى ذلك الحركات والتشكيل والأرقام بنمطيها.
النتيجة العملية: ملف خط عربي كامل قد يتجاوز عدة أضعاف نظيره اللاتيني بالوزن نفسه.
1. صيغة الملف — أول قرار
استخدم woff2 حصرياً. هي الأكفأ ضغطاً والمدعومة في كل المتصفحات الحديثة — راجع توثيق MDN حول @font-face.
@font-face {
font-family: 'MyArabicFont';
src: url('/fonts/my-arabic.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
لا ترفع ttf أو otf للويب — هذه صيغ تصميم لا صيغ نشر، وحجمها أكبر بكثير بلا فائدة.
2. حمّل ما تستخدمه فقط
أشيع خطأ: تحميل خمسة أوزان (رفيع، عادي، متوسط، عريض، أسود) واستخدام اثنين.
كل وزن ملف مستقل يُحمَّل. احصر نفسك بوزنين أو ثلاثة كحد أقصى:
- وزن عادي (400) للنصوص.
- وزن عريض (700) للعناوين.
- وزن متوسط (500) إن احتجته فعلاً.
والأهم: لا تعتمد على الأوزان المُحاكاة. المتصفح يستطيع تعريض خط غير عريض برمجياً، لكن النتيجة رديئة بصرياً في العربية أكثر من اللاتينية.
3. تقليص الخط (Subsetting) — أكبر مكسب
إن كان موقعك عربياً فقط، فلماذا تحمّل محارف لاتينية وسيريلية ورموزاً لا تستخدمها؟
التقليص يزيل المحارف غير المستخدمة من ملف الخط، وقد يخفض الحجم بشكل كبير.
أدوات شائعة: pyftsubset (من حزمة fonttools) وglyphhanger.
pyftsubset my-arabic.ttf \
--output-file=my-arabic.woff2 \
--flavor=woff2 \
--unicodes="U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+0020-007E"
النطاقات أعلاه تغطي: العربية الأساسية، الملحق العربي، أشكال العرض العربية، والمحارف اللاتينية الأساسية (للأرقام والمصطلحات الإنجليزية).
تنبيه: لا تُفرط في التقليص. إن أزلت محارف يستخدمها محتواك (أسماء بحروف خاصة، رموز عملة)، ستظهر مربعات فارغة. اختبر بمحتواك الحقيقي بعد التقليص.
4. font-display — منع النص غير المرئي
بدون إعداد، بعض المتصفحات تُخفي النص حتى يُحمَّل الخط — وهذا يعني صفحة فارغة للزائر.
font-display: swap;
swap يعرض النص فوراً بخط احتياطي، ثم يبدّله عند وصول الخط المخصص. الزائر يقرأ فوراً، ويحدث «وميض» بسيط عند التبديل.
لتقليل الوميض: اختر خطاً احتياطياً قريب المقاييس، واضبط size-adjust إن لزم:
@font-face {
font-family: 'ArabicFallback';
src: local('Tahoma');
size-adjust: 95%;
}
body {
font-family: 'MyArabicFont', 'ArabicFallback', sans-serif;
}
5. التحميل المسبق للخط الحرج
الخط المستخدم في أول ما يراه الزائر يستحق أولوية:
<link
rel="preload"
href="/fonts/my-arabic-regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
crossorigin إلزامي حتى لو كان الخط على نطاقك — الخطوط تُحمَّل بوضع CORS دائماً. نسيانه يعني تحميل الخط مرتين.
لا تُحمّل مسبقاً أكثر من خط أو خطين — الإفراط يزاحم موارد أهم.
6. الاستضافة الذاتية مقابل الخدمات الخارجية
استضف الخطوط على نطاقك. الأسباب:
- أسرع — لا اتصال بنطاق خارجي (DNS + TLS + طلب).
- أخصّ — لا تسريب لبيانات زوارك لطرف ثالث، وهذا اعتبار خصوصي حقيقي في القطاعات المنظمة. راجع دليل الامتثال لنظام حماية البيانات.
- أثبت — لا اعتماد على توفّر خدمة خارجية.
تحقّق من الترخيص قبل الاستضافة الذاتية — بعض الخطوط التجارية تمنعها أو تشترط شروطاً.
7. اختيار الخط نفسه
معايير عملية بعيداً عن الذوق:
الوضوح في الأحجام الصغيرة. كثير من الخطوط العربية الجميلة تصبح غير مقروءة عند 14px. اختبر بالحجم الذي ستستخدمه فعلاً.
دعم الأوزان. خط بوزن واحد يحدّ من التسلسل البصري.
دعم الأرقام بنمطيها — الهندية واللاتينية.
التوافق مع الإنجليزية. معظم المحتوى العربي يخلط مصطلحات إنجليزية. خط يوفّر محارف لاتينية متناسقة أفضل من خط يترك المتصفح يستبدلها بخط آخر — الخلط البصري يبدو رديئاً.
الترخيص. تحقّق من السماح بالاستخدام التجاري والاستضافة الذاتية.
8. القياس — لا تخمّن
بعد التنفيذ، قِس الأثر الفعلي:
- حجم ملفات الخطوط الإجمالي — راجعه في لوحة الشبكة بأدوات المطور.
- زمن أكبر عنصر مرئي (LCP) — الخط الثقيل يؤخره.
- إزاحة التخطيط (CLS) — التبديل بين الخط الاحتياطي والمخصص قد يزيح المحتوى.
قاعدة عملية: إجمالي الخطوط تحت 150 كيلوبايت هدف واقعي لموقع عربي بوزنين. تجاوز 300 كيلوبايت يستحق مراجعة.
أخطاء شائعة
تحميل الخط من خدمة خارجية بلا حاجة. يضيف اتصالاً بنطاق آخر (DNS + TLS + طلب) قبل ظهور النص، ويسرّب بيانات زوارك لطرف ثالث. الاستضافة الذاتية أسرع وأخصّ.
نسيان crossorigin مع preload. الخطوط تُحمَّل دائماً بوضع CORS، فبدونه يُحمَّل الخط مرتين — مرة بالتحميل المسبق ومرة عند الاستخدام. هذا يضاعف الكلفة بدل أن يوفّرها.
تحميل كل الأوزان احتياطاً. خمسة أوزان لاستخدام اثنين يعني ملفات مهدورة تُحمَّل في كل زيارة.
الإفراط في التقليص. إزالة نطاقات محارف يستخدمها محتواك تُنتج مربعات فارغة تظهر عند مستخدم لا عندك. اختبر بمحتوى حقيقي بعد كل تقليص.
اختيار الخط من العرض التجريبي وحده. العرض يستخدم نصاً مثالياً بحجم كبير. اختبر بنصك أنت وبالحجم الذي ستستخدمه فعلاً — كثير من الخطوط تفقد وضوحها عند 14px.
تجاهل الوزن الافتراضي للنص. إن كان نصك الأساسي بوزن 300 (رفيع)، فقد يصعب قراءته بالعربية على الشاشات منخفضة الكثافة. الوزن 400 أأمن للنصوص الطويلة.
اقرأ أيضاً
- دعم العربية وRTL في Flutter — التعريب في التطبيقات.
- تصميم جاهز أم مخصص؟ — اختبر القالب بالعربية قبل الشراء.
- WordPress مقابل Next.js — أثر المنصة على الأداء.
الأسئلة الشائعة
ما أفضل خط عربي للويب؟
لا توجد إجابة واحدة — يعتمد على هوية علامتك ونوع المحتوى. المعايير العملية أهم من الاسم: وضوح في الأحجام الصغيرة، أوزان كافية، دعم للأرقام بنمطيها، محارف لاتينية متناسقة، وترخيص يسمح باستخدامك. اختبر مرشحيك بمحتواك الحقيقي وبالحجم الفعلي.
كم يجب أن يكون حجم الخط العربي؟
بعد التقليص وصيغة woff2، الوزن الواحد المقلَّص جيداً يقع عادة في نطاق عشرات الكيلوبايتات. الرقم يختلف بحسب الخط ونطاق المحارف المُبقاة. قِس ملفك بعد التقليص بدل الاعتماد على تقدير عام.
هل أستخدم خطاً واحداً للعربية والإنجليزية؟
إن وجدت خطاً يوفّر الاثنين بجودة متناسقة، فنعم — أبسط وأخف. إن اضطررت لخطين، تأكد أن مقاييسهما (ارتفاع الحرف، عرضه) متقاربة حتى لا يبدو النص المختلط مفكّكاً.
لماذا يظهر نصي بخط مختلف للحظة؟
هذا font-display: swap يعمل كما ينبغي — يعرض النص فوراً بخط احتياطي ثم يبدّله. البديل (إخفاء النص حتى التحميل) أسوأ للتجربة. لتقليل الوميض، اختر خطاً احتياطياً قريب المقاييس واضبط size-adjust.
هل الخطوط تؤثر على ترتيب البحث؟
بشكل غير مباشر لكن حقيقي: سرعة الصفحة عامل ترتيب معلن، والخطوط الثقيلة تبطئ أكبر عنصر مرئي (LCP). خط عربي غير محسّن قد يكلفك جزءاً من درجة الأداء.
ماذا عن التشكيل والحركات؟
معظم الخطوط تدعمها لكن ليس كلها بجودة متساوية. إن كان محتواك يتضمن تشكيلاً (محتوى ديني أو تعليمي)، اختبره صراحةً — بعض الخطوط تضع الحركات بمواضع خاطئة أو تتداخل مع السطر التالي.
الخلاصة
استخدم woff2 حصرياً، وقلّص الخط لنطاق المحارف الذي تستخدمه فعلاً — هذان وحدهما أكبر مكسب.
احصر نفسك بوزنين أو ثلاثة، واستضف على نطاقك لسرعة وخصوصية أفضل.
اضبط font-display: swap ليقرأ الزائر فوراً، وحمّل الخط الحرج مسبقاً مع crossorigin.
وقِس النتيجة — إجمالي تحت 150 كيلوبايت هدف واقعي.
تبني موقعاً عربياً يهمّه الأداء؟ تواصل معنا — نراعي هذه التفاصيل في البناء. اطّلع على خدمات تطوير الويب.