كتير بشوف مواقع حلوه جدا باللغة الانجليزي بس لما بحول اللغة لعربي بلاقي حاجات كتير ممكن تبقى احسن وتبقى النسخة العربي زي الانجليزي واحسن كمان.
من ضمن الحاجات دي الفونت العربي، في العادي بنستخدم الفونت اللى نازل مع الثيم او الفونت اللى اختارنا للغه الاولى وننسى نتأكد انه متوافق مع العربي ولا لا.

طب ازاي نخلي الفونت مختلف في اللغة العربية في الموقع؟
عندنا اكتر من طريقة فيه منهم اننا نستخدم بلاجنز او نضيف الفونت على الموقع عندنا.
1- الطريقة الاسهل على الاطلاق ودي ممكن تريحنا كتير:
هي اننا نستخدم فونت متوافق مع العربي والانجليزي في نفس الوقت وفيه منهم كتيرفي “Google Fonts“.
فونتات زي : Almarai – Cairo – Tajawal – El Messiri كلها فونتات تنفع في العربي والانجليزي ومش هنحتاج كود او بلاجنز اضافية.
2- الطريقة التانية وممكن نستخدم فيها بلاجن مع كود بسيط:
وهنا هنستخدم بلاجن زي Custom font علشان نضيف اي فونت من جوجل فونتس جوا الموقع بتاعنا بحيث نقلل وقت التحميل للفونتات :


بعد اضافة الفونت المطلوب استخدم الكود وغير بس اسم ال font family زي اللى انت كتبته بالزبط وهيغير كل الفونتات في العربي بس والانجليزي هيفضل زي ما هو.
:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) h4,
:lang(ar) h5,
:lang(ar) h6,
:lang(ar) p,
:lang(ar) span,
:lang(ar) a,
:lang(ar) li,
:lang(ar) ul,
:lang(ar) ol,
:lang(ar) blockquote,
:lang(ar) label,
:lang(ar) input,
:lang(ar) textarea,
:lang(ar) button,
:lang(ar) div {
font-family: 'Tajawal', sans-serif;
direction: rtl;
text-align: right;
}
3- الطريقة الاخيرة وانك حتى تعمل الفونتات بالكود:
– كل اللى عليك انك ترفع الفونتات عندك على ملفات الموقع وتقدر تستخد الكود ده في تسمية الفونتات واستخدامها في العربي بنفس الطريقة:
@font-face {
font-family: 'Tajawal';
src: url('/wp-content/themes/your-theme-name/fonts/Tajawal-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Tajawal';
src: url('/wp-content/themes/your-theme-name/fonts/Tajawal-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) h4,
:lang(ar) h5,
:lang(ar) h6,
:lang(ar) p,
:lang(ar) span,
:lang(ar) a,
:lang(ar) li,
:lang(ar) ul,
:lang(ar) ol,
:lang(ar) blockquote,
:lang(ar) label,
:lang(ar) input,
:lang(ar) textarea,
:lang(ar) button,
:lang(ar) div {
font-family: 'Tajawal', sans-serif;
direction: rtl;
text-align: right;
}
خطوة بسيطة بس هتفرق في الموقع بتاعك او اللي شغال عليه كتير وهتبان انك بتفرق معاك التفاصيل .. بالتوفيق