أفضل الخطوط العربية لمواقع الذكاء الاصطناعي وطريقة إضافتها

لماذا يحدث هذا

حين تبني أداة الذكاء الاصطناعي صفحتك، تختار خطاً من قالبها، وهو في الغالب خط لاتيني مثل Inter أو خط النظام. هذه الخطوط لا تحتوي حروفاً عربية، فيبحث المتصفح عن بديل في جهاز الزائر: على آيفون يظهر خط، وعلى ويندوز خط آخر، وعلى أندرويد ثالث. لهذا يبدو موقعك أنيقاً في المعاينة على جهازك ثم يصلك من العميل لقطة شاشة بخط مختلف تماماً.

ويضاف إلى ذلك ثلاثة أخطاء صغيرة تتكرر في المواقع المولّدة:

• تباعد الحروف (letter-spacing): القوالب الإنجليزية تضيفه للعناوين والأزرار، وفي العربية يفصل الحروف المتصلة فتظهر الكلمة مقطّعة.
• ارتفاع سطر ضيّق: القيمة 1.2 أو 1.4 تناسب اللاتينية، لكن الحروف العربية لها نقاط وأسنان فوق السطر وتحته فتتلاصق الأسطر.
• الأوزان الوهمية: إن طلبت وزن 700 والخط محمّل بوزن 400 فقط، يصنع المتصفح سماكة مصطنعة تبدو ملطّخة.

الحل ليس في خط «أجمل» بل في خط مصمم للعربية، محمّل بالأوزان التي تستخدمها فعلاً، ومضبوط معه ارتفاع السطر.

وتختلف المشكلة حسب الأداة قليلاً. بعض الأدوات تضع الخط في ملف إعداد Tailwind، وبعضها في ملف CSS الرئيسي، وبعضها يكتبه مباشرة في كل مكوّن. فإن غيّرت الخط في مكان واحد ولم يتغير شيء، فابحث عن font-family في المشروع كله، فالأغلب أن قيمة أخرى تتغلّب على قيمتك في مكان أعمق.

الحل خطوة بخطوة في مشروعك

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

قاعدة عملية: خط واحد بوزنين أو ثلاثة يكفي لأغلب المواقع. إن أردت تمييز العناوين فاجمع خطاً كوفياً للعناوين مع خط هادئ للنصوص، مثل Noto Kufi Arabic مع Tajawal لمحمصة، أو IBM Plex Sans Arabic وحده لمكتب محاماة.

1. 1

   حمّل الخط بوسم link في رأس الصفحة

   هذه الطريقة الأسرع، لأن المتصفح يبدأ تحميل الخط مبكراً. ضعها في index.html أو القالب الأساسي، واطلب الأوزان التي تستخدمها فقط.

   <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=Noto+Kufi+Arabic:wght@600;800&family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">

2. 2

   أو استورده من ملف CSS

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

   @import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;800&display=swap");

3. 3

   اجعله الخط الافتراضي واضبط القراءة

   عرّف الخط على مستوى الصفحة كلها، وأضف ارتفاع سطر مريحاً، وألغِ تباعد الحروف الذي قد يأتي من القالب.

   :root {
     --font-body: "Tajawal", system-ui, sans-serif;
     --font-display: "Noto Kufi Arabic", "Tajawal", sans-serif;
   }
   body {
     font-family: var(--font-body);
     line-height: 1.7;
   }
   h1, h2, h3 {
     font-family: var(--font-display);
     line-height: 1.35;
   }
   :lang(ar) * { letter-spacing: normal !important; }

4. 4

   في مشاريع Tailwind

   أضف الخط إلى الإعداد، ثم احذف أصناف tracking-wide و tracking-widest من العناوين والأزرار العربية.

   // tailwind.config.js
   theme: {
     extend: {
       fontFamily: {
         sans: ["Tajawal", "system-ui", "sans-serif"],
         display: ["\"Noto Kufi Arabic\"", "Tajawal", "sans-serif"],
       },
     },
   },
   
   <h1 class="font-display text-4xl font-extrabold leading-snug">قهوة مختصة من حقول اليمن</h1>

5. 5

   استضف الخط بنفسك إن أردت سرعة أعلى

   نزّل ملفات woff2 وضعها في مجلد الموقع. خاصية unicode-range تجعل المتصفح يحمّل ملف العربية فقط حين تظهر حروف عربية في الصفحة.

   @font-face {
     font-family: "Tajawal";
     src: url("/fonts/tajawal-400-arabic.woff2") format("woff2");
     font-weight: 400;
     font-display: swap;
     unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
   }

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

وإن احترت بين خطين، فهذه طريقة اختيار سريعة لا تحتاج خبرة تصميم. افتح صفحة الخط على Google Fonts، واكتب في خانة المعاينة جملة حقيقية من موقعك فيها أرقام وكلمة إنجليزية، مثل «احجز جلستك في صالون لمسة بـ 150 ر.س فقط»، ثم قارن:

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

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

الحل الأسرع: أوترا

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

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