كيفية تغيير الخطوط الى خطوط عربية جذابة لمدونات بلوجر

 بسم الله الرحمن الرحيم ,
اقدم لكم ايوم شرح طريقة اضافة خطوط عربية جذابة

 

خطوط مميزة بلوجر


ما هى خطوط بلوجر 


الخطوط المستخدمة فى مدونات بلوجر التقليدية هى خطوط ليست جميلة وليست جاذبة للزوار , لذلك يجب ابتكار طريقة ما لوضع خطوط عربية لتظهر المدونة بشكل جميل وجذاب , وانا قد احضرت لكم بعض خطوط بلوجر التقليدية لتشاهدوا الفرق بأنفسكم :

خط tahoma
خط ARIAL
خط traditional arabic
خط Verdana
 خط Times

كما رأيتم انها خطوط تقليدية وغير جذابة .


امثلة على الخطوط الحديثة الجذابة

خط Droid Kufi Bold


هو من افضل الخطوط واشهرها على شبكة الانترنت وكثير من المواقع الضخمة تعمل به ! ,
وهذا مثال له :

خط Droid Kufi Regular

خط Droid Naskh Bold

خط Droid Naskh Regular


طريقة تركيب الخطوط المميزة على بلوجر


قد يقابل الكثير مننا صعوبة فى تركيب الخطوط على بلوجر ولكن سأشرح طريقة سهلة لتركيبها :
اولا ادخل على لوحة تحكم بلوجر ثم قالب ثم تحرير html
وابحث عن هذا الكود بإستخدام Ctrl+f

]]></b:skin>
وضع قبله كود الخط الذى تريده :

خط DroidKufi-bold

@font-face {
  font-family: 'DroidKufi-bold';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');
}

خط DroidKufi-Regular

@font-face {
  font-family: 'DroidKufi-regular';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf) format('truetype');
}

خط DroidNaskh-bold


@font-face {
  font-family: 'DroidNaskh-bold';
  font-style: normal;
  font-weight: 700;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Bold.ttf) format('truetype');
}

خط DroidNaskh-Regular


@font-face {
  font-family: 'DroidNaskh-regular';
  font-style: normal;
  font-weight: 400;
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot);
  src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff2) format('x-woff2'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.woff) format('woff'),
       url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabicnaskh/v4/DroidNaskh-Regular.ttf) format('truetype');
}
ولتغيير لون الخط ما عليك الا بتغيير اسم الخط سواءً كان Arial او Tahoma او غيرها الى اسم الخط ....
حيث انك تبحث عن
Font-family:Arial

الموضوع الاصلى
هنا

7 تعليقات

  1. السلام عليكم..~
    كيفك اخي هشا؟

    مدونتي اريدها بخط تاهوما
    لكن كلما افتح اي موضوع لطريقة تغير الخط
    لا ينجح معي
    اقصد حينما ابحث عن اول كلمه لتغير الخط
    لا اجده موجوده ع مدونتي ف تحرير html

    ولا اعرف ماذا افعل

    انا ارغب بشده بخط تاهوما

    وشكرًا مقدمًا

    ردحذف
    الردود
    1. :)
      عند عملية البحث عن الكود فى القالب برجاء التأكد من عدم وجود مسافات اثناء كتابة الكود فى خانة البحث :)
      ولتغيير خطوط المدونة الى tahoma
      فقط بالبحث عن Font-family:Arial وتحويله الى Font-family:tahoma

      حذف
    2. واحيانا يوجد فى بعض القوالب الكود بهذا الشكل
      font: normal 12px Arial, Tahoma
      :)

      حذف
  2. أزال المؤلف هذا التعليق.

    ردحذف
  3. (h)
    /
    http://zaman-jamil.blogspot.com/

    ردحذف
  4. أزال المؤلف هذا التعليق.

    ردحذف
أحدث أقدم