تغيير خط المدونة بالكامل مع أكثر من 16 من خطوط جوجل Google Fonts العربية

تغيير خط المدونة بالكامل مع أكثر من 16 من خطوط جوجل Google Fonts العربية

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

الخطوط العربية المتوفرة على خطوط جوجل هي كالتالي مع الترتيب كما تظهر في الصورة:


  1. Lateef
  2. Cairo
  3. Amiri
  4. Lalezar
  5. Reem Kufi
  6. Changa
  7. Mada
  8. Aref Ruqaa
  9. Scheherazade
  10. Lemonada
  11. Jomhuria
  12. El Messiri
  13. Rakkas
  14. Mirza
  15. Harmattan
  16. Katibeh
شاهد الصورة واختر ما يناسب مدونتك:
لائحة خطوط جوجل العربية Google Fonts
لائحة خطوط جوجل Google Fonts


طريقة وكيفية تغيير خط المدونة بالكامل

اضافة كود CSS لتحميل الخطوط

أكواد CSS الخاصة بالخطوط:
font-family: 'Lateef', cursive;
font-family: 'Cairo', sans-serif;
font-family: 'Amiri', serif;
font-family: 'Lalezar', cursive;
font-family: 'Reem Kufi', sans-serif;
font-family: 'Changa', sans-serif;
font-family: 'Mada', sans-serif;
font-family: 'Aref Ruqaa', serif;
font-family: 'Scheherazade', serif;
font-family: 'Lemonada', cursive;
font-family: 'Jomhuria', cursive;
font-family: 'El Messiri', sans-serif;
font-family: 'Rakkas', cursive;
font-family: 'Mirza', cursive;
font-family: 'Harmattan', sans-serif;
font-family: 'Katibeh', cursive;


لتغيير خط مدونة بلوجر خاصتك بشكل كامل عن طريق اضافة خطوط جوجل اتبع الخطوات التالية:

1.من واجهة التحكم في مدونتك قم بالنقر على تخطيط ثم تحرير HTML
2. Ctrl+F من لوحة المفاتيح بعد النقر في أي مكان وسط القالب، قم بالبحث عن </head>
3. فوقه مباشرة أضف الكود التالي:

<link href="https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Cairo|Changa|El+Messiri|Harmattan|Jomhuria|Katibeh|Lalezar|Lateef|Lemonada|Mada|Mirza|Rakkas|Reem+Kufi|Scheherazade" rel="stylesheet"/>

4. ستبحث بنفس الطريقة عن  وتحت وسم الفتح  <b:skin> أضف الكود التالي:

*{ font-family:  إسم الخط هنا !important;}

مثلا تريد تطبيق خط Lateef، الكود الذي ستيضفه سيكون بهذا الشكل:
*{ font-family: 'Lateef', cursive !important;}

أو خط Reem Kufi بهذا الشكل:
*{ font-family: 'Reem Kufi', sans-serif !important;}

كل ما تقوم به هو تغيير إسم الخط فقط.

شرح الطريقة بالفيديو

طريقة اضافة خطوط عربية للمدونات


لديكم الآن أكثر من 16 من خطوط جوجل Google Fonts العربية لجعل مدونتكم تبدو أجمل.

هناك 5 تعليقات

  1. كان من المفترض وضع اسم الخط العربى لتسهيل الاختيار

    ردحذف
  2. لم تذكر هل من الممكن وضع أكثر من خط وأيهم سيكون هو الواجهة؟

    ردحذف
    الردود
    1. نعم يمكن وضع أكثر من خط. لكن يستعمل الأول فقط.

      حذف
  3. ماهو احسن خط و أي خط هو الانسب لموقع أخبار جوجل

    ردحذف
    الردود
    1. أعتقد أن مواقع الاخبار تستعمل خطوط مختلفة.
      مثلا الجزيرة العربية...

      حذف

لكل سؤال أو إضافة، يرجى كتابة تعليقك في الخانة اسفله