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

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

محتوى المقال

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

في هذه المقالة، سأشرح لك بالتفصيل كيف تقوم بتغيير الفونت بناء علي اللغة. وأيضا سيتم الأخذ في الاعتبار تطبيق الطريقة المثلي للحفاظ علي سرعة الموقع وتفادي الأخطاء التي تظهر سواء في 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 فستقوم بخدمة الفونتات لزوارك!
اذا كان لديك أسئلة، لا تتردد بالسؤال في التعليقات وسأقوم بالرد في أسرع وقت!

شارك هذه المقالة:

Facebook
Twitter
LinkedIn
WhatsApp

إقرأ أكثر عن ووردبريس

Learn WordPress – Session 3

Hi in the third post of the “Learn WordPress” live sessions series. Check the first session details, video and slides. Check the second session details, video and slides. In the 3rd live session we talked about:

المزيد ..

استضافات وكورس التعريب وغيرهم في أول Giveaway في ٢٠٢٠

أول Giveaway في 2020! كتير مننا بدأ سنة 2020 بأحلام وأهداف وكانت من أهدافي السنة دي انزل فيديوهات اكتر وبصورة دورية ان شاء الله. وكمان أتعلم React والـ Headless WordPress. والحمدلله جزء مش بطال من الأهداف دي اتحقق. وعشان أساعدك في أهدافك وأشجعك عليها، عملت الـ Giveaway البسيطة دي وأتمني إن أكبر عدد يستفيد منها.

المزيد ..

7 Comments

  1. شرح رائع ومفيد أشكرك جداً
    لكن لدي سؤال:
    يوجد مع بعض الثيمات فونتات قوقل كاملة 965 فونت ازاي ألغي طلب الفونتات ده تماما ، اي الثيم لايحمل هذه الفونتات برابط او غيره
    لما اعمل فحص للصفحة على أي أداة اختبار للصفحة مش يعطيني تنبيه على خطوط قوقل…

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

  2. بعد اذنك يا بشمهندس انا جربت الموضوع على ثيم استرا على صفحة معمولة ب elementor ومتشتغلش الخط ممكن الحل ؟

      1. خلاص لقيت مكان الفونت كان مكانه متغير وعرفت اتعامل معاه الحمد لله . الحمد لله المشكلة اتحلت 🙂

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *