أفضل خطوط عربية للمواقع والمتاجر الإلكترونية في 2026

أفضل خط عربي لمعظم المتاجر مجاني. خطوط IBM Plex Sans Arabic وتجوال والقاهرة تغطي تقريبًا كل متجر خليجي، والثلاثة بلا تكلفة.

اختيار الخط هو الجزء السهل. الفرق الحقيقي في سرعة تحميله، وتناسقه مع الخط الإنجليزي، وعرض الأسعار بشكل صحيح.

إليك قائمة مختصرة مصممة لشاشات التسوق، مع اختيارات حسب نوع المتجر وخطوات الإعداد في شوبيفاي وسلة وزد. وهي جزء من خطة توطين المتجر للعربية كاملة.

ما الذي يجعل الخط العربي مناسبًا للمتجر؟

مهمة خط المتجر أصعب من خط المدونة. عليه أن يبقى واضحًا بحجم 12 بكسل على الجوال، وأن يجاور أسماء العلامات اللاتينية، وأن يجعل الأسعار سهلة القراءة.

قيّم كل خط على خمسة أمور:

• الوضوح بالأحجام الصغيرة. بطاقات المنتجات والفلاتر وحقول الدفع صغيرة. الحروف المفتوحة والنقاط الواضحة تفوز هنا.
• عدد الأوزان. تحتاج على الأقل وزنًا عاديًا ومتوسطًا وعريضًا، للنص والأزرار والأسعار.
• التناسق مع اللاتيني. معظم عناوين المنتجات في الخليج تخلط العربي بأسماء علامات وأرقام موديلات لاتينية.
• حجم الملف. الحرف العربي له عدة أشكال، فملفاته أكبر من الخطوط اللاتينية.
• الرخصة. خطوط جوجل المجانية برخصة SIL Open Font License (OFL)، وهي تسمح بالاستخدام التجاري.

الأسلوب مهم أيضًا. الخط النسخي يشبه الكتب المطبوعة، والكوفي هندسي وجريء. ولنصوص المتجر، تُقرأ الخطوط الحديثة التي بينهما بشكل أفضل.

قواعد ارتفاع السطر والتباعد والأحجام تنطبق على أي خط عربي، وتجدها في دليل تصميم RTL. لذلك تركّز هذه الصفحة على اختيار الخط وتحميله.

مقارنة أفضل الخطوط العربية المجانية

تسعة خطوط مجانية تغطي تقريبًا كل احتياجات المتجر. كلها على Google Fonts برخصة OFL، ويمكن استضافتها على موقعك.

بعض الملاحظات خلف الجدول:

• IBM Plex Sans Arabic هو الخط العربي الأكثر استخدامًا في المواقع الإقليمية التي يعرضها موقع إلهام، متقدمًا على الخطوط المدفوعة. وتوأمه اللاتيني يجعل الصفحة ثنائية اللغة تبدو تصميمًا واحدًا.
• تجوال حروفه منخفضة الارتفاع، فكبّر نص الجسم درجة واحدة. ويبدو أنيقًا في العناوين والأسعار.
• القاهرة خط متغيّر، فملف واحد يغطي كل الأوزان. وهو منتشر جدًا في المواقع السعودية والمصرية، ويبقى واضحًا بالأحجام الصغيرة.
• Noto Sans Arabic يغطي أكبر عدد من الحروف والرموز. ضعه آخر قائمة الخطوط حتى لا يلجأ المتصفح أبدًا إلى خط نظام عشوائي.
• Vazirmatn صُمم للفارسية أولًا. يعمل مع العربية، لكن اطلب من قارئ عربي مراجعته على صفحات منتجاتك.

أي خط عربي يناسب متجرك؟

ابدأ مما تبيعه. يجب أن يشبه الخط منتجك، ثم ينجح في اختبار الحجم الصغير على الجوال.

لست مضطرًا لخط واحد في كل مكان. نمط شائع هو القاهرة للبانرات والعناوين، وIBM Plex Sans Arabic للنصوص وصفحة الدفع. لكن عائلتان هما الحد الأقصى، وإلا ثقلت الصفحة.

متى يستحق الخط العربي المدفوع؟

الخط المدفوع منطقي عندما تحتاج علامتك أن تبدو مختلفة عن كل متجر يستخدم نفس الخطوط المجانية. أما لأول إطلاق عربي، فالمجاني يكفي.

أشهر الخطوط المدفوعة لدى العلامات الخليجية:

• Graphik Arabic من Commercial Type: خط عملي نظيف بتسعة أوزان، محبوب لدى شركات التقنية المالية وأسلوب الحياة.
• عائلات 29LT مثل بكرة وزارد ورواية: خطوط ثنائية صُممت بالعربي واللاتيني بنفس الأهمية.
• Adobe Arabic عبر Adobe Fonts: مشمول إذا كنت مشتركًا في Creative Cloud.
• خطوط خاصة بالعلامة: علامات إقليمية كبيرة مثل ثمانية صمّمت خطوطها الخاصة.

راجع رخصة الويب قبل الشراء. كثير من المسابك تسعّر استخدام الويب حسب عدد مشاهدات الصفحات شهريًا، وهي رخصة منفصلة عن رخصة سطح المكتب.

كيف تدمج الخط العربي مع خطك اللاتيني؟

اختر خطين متقاربين في ارتفاع الحروف وسماكة الخطوط، حتى لا يبدو عنوان المنتج المختلط كأنه خطان يتصارعان.

هناك ثلاث طرق سهلة:

1. استخدم ثنائيًا متطابقًا. IBM Plex Sans Arabic مع IBM Plex Sans، أو Noto Sans Arabic مع Noto Sans. صُمم كل ثنائي معًا.
2. استخدم خطًا ثنائي اللغة. القاهرة وتجوال والمراعي وReadex Pro وRubik تشمل اللاتيني، فتتناسق أسماء العلامات وأرقام الموديلات.
3. احتفظ بخط علامتك الإنجليزي. ضعه أولًا ثم الخط العربي. يستخدم المتصفح خطك اللاتيني للحروف اللاتينية والخط العربي للحروف العربية.

الطريقة الثالثة تبدو هكذا في CSS: font-family: "Inter", "IBM Plex Sans Arabic", "Noto Sans Arabic", sans-serif;. وهي تحافظ على هوية علامتك الإنجليزية.

مثلًا، عنوان مثل "سماعات لاسلكية X2 Pro" يعرض اسم الموديل بخطك اللاتيني والباقي بالعربي. قارن الخطين جنبًا إلى جنب بنفس الحجم. وإذا بدا اللاتيني أكبر بكثير، جرّب ثنائيًا آخر.

كيف تتعامل الخطوط مع الأسعار ورمز الريال؟

الخط يحدد شكل الأرقام ورمز العملة، فافحص الاثنين قبل أن تعتمده.

الأرقام العربية (1، 2، 3) في الأسعار

المتاجر الخليجية تعرض الأسعار والمقاسات وأرقام الطلبات بالأرقام العربية (مثل 249). والخط يرسم أي أرقام يُخرجها الكود.

المشكلة في الكود الذي ينسّق الأرقام بلغة ar-SA، لأنه يُخرج الأرقام الهندية (١، ٢، ٣) افتراضيًا. استخدم ar-SA-u-nu-latn لفرض الأرقام العربية، كما يشرح دليل الأرقام العربية والهندية.

في أعمدة الأسعار وجداول الطلبات، أضف font-variant-numeric: tabular-nums;. عندها يأخذ كل رقم نفس العرض، فتصطف الأسعار بترتيب إذا كان الخط يدعم ذلك.

رمز الريال السعودي الجديد

اعتُمد رمز الريال في فبراير 2025، وأُضيف إلى يونيكود 17.0 برمز U+20C1 في سبتمبر 2025. ويوضع يسار الرقم مع مسافة، في كل اللغات.

معظم خطوط الويب العربية لا ترسم الرمز بعد. خط Noto Naskh Arabic يدعمه منذ الإصدار 2.021، أما IBM Plex Sans Arabic وتجوال والقاهرة وNoto Sans Arabic وNoto Kufi Arabic فما زالت بدونه. اختبر خطك بوضع الرمز في صفحة: المربع الفارغ أو الشكل الغريب يعني أن الخط لا يدعمه.

لديك حلّان نظيفان:

• أيقونة SVG للرمز الرسمي بجانب السعر، مع نص "SAR" مخفي لقارئات الشاشة.
• خط صغير للرمز فقط يُحمَّل بخاصية unicode-range: U+20C1، فلا يعمل إلا لهذا الحرف.

وإذا فضّلت الانتظار، فـ"ر.س" أو "SAR" ما زالا مناسبين. ويقدّم دليل رمز الريال السعودي كود البديل، ويشرح دليل تسعير الريال والدرهم صيغ الأسعار.

كيف تجعل الخطوط العربية تُحمَّل بسرعة؟

الخطوط العربية أثقل من اللاتينية، ومعظم المتسوقين في الخليج يتصفحون من الجوال. والخط البطيء يعني نصًا فارغًا وقفزات في الصفحة وطلبات ضائعة.

1

حمّل 2–3 أوزان

عادي للنص، ومتوسط للأزرار، وعريض للأسعار والعناوين. كل وزن ثابت إضافي ملف جديد.

2

استخدم WOFF2

WOFF2 أصغر صيغة لخطوط الويب، وتدعمها كل المتصفحات الحديثة. لا ترسل ملفات TTF أو OTF للمتسوقين.

3

قلّص الملف إلى العربي واللاتيني

احذف السيريلية واليونانية وأي حروف لا تستخدمها. يفعل ذلك Google Fonts وأدوات مثل glyphhanger وpyftsubset.

4

استضف الملفات بنفسك

قدّم الخطوط من نطاقك أو من CDN المتجر. هذا يوفر اتصالًا بخادم خارجي ويحمي خصوصية المتسوقين.

5

اضبط font-display: swap

يظهر النص فورًا بخط احتياطي ثم يتبدّل. فلا يرى المتسوق بطاقة منتج فارغة أبدًا.

6

حمّل وزن النص مسبقًا

أضف رابط preload للوزن الظاهر أعلى الصفحة فقط. التحميل المسبق لكل الأوزان يلغي الفائدة.

بعدها افحص المتجر في Google PageSpeed Insights على الجوال. وإذا ظهرت قفزات كبيرة بعد تحميل الخط، فالخط الاحتياطي مختلف جدًا، فاختر خط نظام أقرب.

مثال عملي: إعداد الخطوط لمتجر أزياء في الرياض

لنأخذ متجر عبايات ثنائي اللغة يبيع في السعودية والإمارات. خط علامته الإنجليزي هندسي نظيف، ويريد أن تبدو الواجهة العربية بنفس الفخامة.

هكذا تكتمل خطة الخطوط:

• الاختيار: تجوال للعربي لأنه خفيف وأنيق، مع اختبار IBM Plex Sans Arabic كبديل.
• الأوزان: عادي للنص، ومتوسط للأزرار، وعريض للأسعار. أي ثلاثة ملفات WOFF2 مقلّصة إلى العربي واللاتيني.
• قائمة الخطوط: "Brand Sans", "Tajawal", "Noto Sans Arabic", sans-serif، فتبقى أسماء العلامات اللاتينية بالخط الإنجليزي.
• الأحجام: نص الجسم العربي أكبر بدرجة، لأن حروف تجوال منخفضة.
• الأسعار: أرقام عربية لا هندية عبر ar-SA-u-nu-latn، مع أيقونة SVG لرمز الريال في الصفحات السعودية و"د.إ" في صفحات الإمارات.

قبل الإطلاق، يفحص الفريق أهم خمس صفحات منتجات وصفحة الدفع على آيفون وأندرويد. وتظهر العناوين والمقاسات والأسعار كلها واضحة والجوال على بُعد ذراع.

ملاحظات لمتاجر شوبيفاي

• منتقي الخطوط في ثيمات شوبيفاي يشمل خط المراعي، لكن ملفات المكتبة تغطي الحروف اللاتينية ورموز العملات فقط. لا تتوقع أن يرسم الحروف العربية.
• ارفع ملفات WOFF2 العربية من المحتوى ثم الملفات (Content > Files)، وانسخ رابط كل ملف.
• في محرر الثيم، افتح إعدادات الثيم ثم Custom CSS. أضف قاعدة @font-face لكل وزن، وطبّق الخط عبر html[lang="ar"] body.
• حد CSS المخصص على مستوى الثيم 1,500 حرف، وهذا يكفي لوزنين أو ثلاثة.
• ثيمات عائلة Horizon تدعم RTL منذ أكتوبر 2026. ويغطي دليل متجر شوبيفاي العربي باقي الإعداد.

ملاحظات لمتاجر سلة وزد

• المنصتان عربيتان في الأساس، فخطوطهما الافتراضية تعرض العربية بشكل صحيح.
• في سلة، اذهب إلى المتجر وقنوات البيع، ثم تصميم المتجر، وخصّص الثيم. ومن هوية المتجر اختر خطًا من القائمة أو أضف ملف خطك الخاص.
• في زد، افتح تصميم المتجر، وخصّص الثيم، واختر الخط من إعدادات الثيم.
• إذا استخدمت خطًا خاصًا، فاختبر رمز الريال والأرقام في صفحة منتج. خطوط العلامات كثيرًا ما تفتقد الرمز الجديد.

ملاحظات للمواقع المبنية خصيصًا

• في Next.js، تستضيف next/font خطوط جوجل تلقائيًا مع التقليص وfont-display. اطلب مجموعتي arabic وlatin.
• طبّق الخط العربي على :lang(ar) أو [dir="rtl"]، حتى لا تحمّله الصفحات الإنجليزية أبدًا.
• استخدم خطًا متغيّرًا مثل القاهرة أو Noto Sans Arabic إذا احتجت أربعة أوزان أو أكثر. ملف متغيّر واحد أفضل من أربعة ملفات ثابتة.

تحتاج من يجمع لك كل هذا؟ فريقنا يقدّم توطين متاجر شوبيفاي للعربية، والخطوط ضمنها.