تغيير الفونت بناء علي اللغة (مع الحفاظ علي سرعة الموقع)

اذا كنت تمتلك موقع متعدد اللغات وخاصة اذا كانت اللغات هي الإنجليزية والعربية فستحتاج أن يظهر المحتوي في كل لغة بفونت مختلف.

في هذه المقالة، سأشرح لك بالتفصيل كيف تقوم بتغيير الفونت بناء علي اللغة. وأيضا سيتم الأخذ في الاعتبار تطبيق الطريقة المثلي للحفاظ علي سرعة الموقع وتفادي الأخطاء التي تظهر سواء في PageSpeed Insights او GTMetrix.

الخطوة رقم 1: إختيار الفونت

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

لنفترض أنك قررت إختيار فونت Roboto للإنجليزية وفونت Cairo للعربية. قم بالضغط علي علامة الـ (+) لكل منهما.

بعد الضغط علي كل منهما، ستتم إضافتهم الي نافذة جديدة كما هو موضح بالشكل، إضغط علي كلمة Customize

بعد الضغط علي Customize، قم بإختيار أوزان الخطوط المناسبة لكل فونت، مثلا اختار عدد 2 وزن لكل فونت للاستخدام ال Regular والـ Bold. ثم إضغط علي علامة التحميل.

الخطوة رقم 2: تحويل الفونتات الي .woff

بعد تحمل الفونتات وفك ضغط الملفات ستجد الفونتات بإمتداد .ttf لذا عليك تحويلها الي امتداد .woff لكي تعمل علي موقعك. يمكنك تحويلها باستخدام هذه الخدمة المجانية ConvertIO. استخدام الموقع سهل للغاية، فقط عليك رفع الملفات المختارة وسيقوم بتحويلها لك.

لاحظ أنك ستقوم بإختيار أوزان الخطوط مرة أخري من الملفات المحملة. ولاحظ أيضا أن موقع ConvertIO يقوم بتحويل ملفين بحد أقصي في المرة الواحدة.

بعد تحويل الفونتات، قم بحفظهم علي جهازك استعدادا للخطوة الثالثة.

الخطوة رقم 3: رفع الملفات الي موقعك

لديك الآن 4 ملفات بامتداد .woff، اثنين منهما للغة العربية (فونت Cairo) و اثنين للغة الإنجليزية (فونت Roboto). باستخدام FTP قم برفعهم الي فولدر داخل موقعك وليكن علي هذا المسار wp-content/uploads/fonts

الخطوة رقم 4: إضافة الفونتات الي CSS موقعك

افتح ملف style.css لإضافة الفونت الخاص باللغة الإنجليزية وأضف الكود التالي (ستحتاج الي تغيير font-family و font-weight واسم ومكان الفونت اذا اخترت فونتات اخري او رفعتهم الي مكان اخر)

افتح ملف rtl.css لإضافة الفونت الخاص باللغة العربية وأضف الكود التالي

الان، يمكنك استخدام الفونتات لأي عنصر في موقعك. هيا نقوم بتغيير الفونت الـ Body والـ Headings للغتين.

الخطوة رقم 5: إستخدام الفونتات

بمنتهي السهولة، يمكنك استخدام الفونتات لتغيير اي عنصر لديك، فمثلا لتغيير الـ Headings يمكنك اضافة

وبالمثل، في الـ rtl.css يمكنك اضافة

بهذه الطريقة، لن تعتمد علي اي مصدر خارجي للفونتات الخاصة بك، وأيضا اذا كنت تستخدم CDN كـ KeyCDN فستقوم بخدمة الفونتات لزوارك!
اذا كان لديك أسئلة، لا تتردد بالسؤال في التعليقات وسأقوم بالرد في أسرع وقت!