أحدث الخطوط العربية في الويب لمدونات بلوجر

أسهل طريقة لتركيب خطوط احترافية لمدونتك

السلام عليكم ورحمة الله وبركاته ..
أهلا بكم أعضاء وزوار مدونة ابداع هاوس
هذا هو الدرس الثاني من دورة تطوير المواقع [تابع الدرس الأول : كيفية تعريب قالب بلوجر]

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

طريقة التركيب :
أولا توجه الى لوحة التحكم >> قالب >>   تحرير  Html  
ثم نبحث عن الوسم ]]></b:skin>
ونضيف قبله مباشرة كود css لخطوط المراد إضافتها للمدونة

الخط الأول : ge_dinar

أروع خط عربي احترافي


@font-face {
font-family: "ge_dinar";
src: url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.eot');
src: local("â&#732;º"), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.eot?#iefix') format('embedded-opentype'), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/ge_dinar.otf') format('opentype');
font-weight: normal;
}



الخط الثاني : ges

أحدث الخطوط العربية



@font-face {
font-family: 'ges';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype');
}


الخط الثالث : GE-SS-Unique

خط عربي احترافي لمدونتك


@font-face {
font-family: 'GE SS Unique';
src: url('http://www.fontsaddict.com/fontface/ge-ss-unique-light.otf');
}



الخط الرابع : 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?#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?#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");



الخط السادس : Kaushan Script

خط عربي جميل

@font-face{  font-family:'Kaushan Script';   font-style:normal;   font-weight:400;   src:local('Kaushan Script'),local('KaushanScript-Regular'),url(http://themes.googleusercontent.com/static/fonts/kaushanscript/v1/qx1LSqts-NtiKcLw4N03IFhlQWQpSCpzb2Peu3I-Q34.woff) format('woff')
}



الخط السابع : hacen_liner

خط جديد بلوجر


@font-face {
font-family: "hacen_liner";
src: url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.eot');
src: local("â&#732;º"), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.eot?#iefix') format('embedded-opentype'), url('http://www.hawaalive.com/girl-games/themes/default/assets/fonts/hacen_liner.woff');
font-weight: normal;
}


بعدج إدراجك للأكواد السابقة ... عندما تريد اضافة /تغيير خط معين فى أي جزء في القالب (القائمة مثلا)
ستجد الكود على هذا الشكل font-family:arial , tohama
اضف اسم الخط بعد font-family: مباشرة ..
لتكون في النهاية بهذا الشكل font-family: font-name arial , tohama
طبعا استبدل font-name باسم الخط .

أما إذا أردت تعميم خط واحد على القالب بأكمله (مع العلم أنها لا تنفع مع كل القوالب) ..
ما عليك سوى البحث عن body {
وأضف بعدها font-family: font-name

 ( إذا وجدت الكود السابق لا تقوم بإضافته مرة أخرى وإنما قم بالتعديل عليه فقط ) 

الى هنا نكون قد وصلنا الى ختام موضوع اليوم ... أتمنى أن تكونو قد اسفدتم ولو بالقيل ..

إذا أعجبك الدرس لا تبخل بمشاركته مع أصدقائك .

هناك 23 تعليقًا:

  1. تدوينة جميلة , شكراً لك
    بواسطة : المدون

    ردحذف
  2. تم التطبيق على مرصدي:www.arabicco.com

    ردحذف
  3. ماشاء الله على الابداع
    احسنت يا اخى الكريم
    تحياتى لك : كينج نت

    ردحذف
  4. ما نوع الخط الموجود في المدونة

    ردحذف
    الردود
    1. الخط المستخدم هو الخط الخامس : DroidKufi-regular

      حذف
  5. بارك الله فيك أخي على الدرس القيم ....سلام

    ردحذف
    الردود
    1. الله يباركلك أخي .. شكرا لمرورك وتفاعلك المشجع ^_^

      حذف
  6. الردود
    1. الشكر لله أخي .. شكرا لمرورك الطيب

      حذف
  7. شرح الاضافه غير مفهوم ولم استطيع انا اعملها بشكل جيد

    ردحذف
    الردود
    1. ما الشئ الغير مفهوم في الشرح بالضبط ؟!
      باختصار شديد :
      - يوجد كود لكل خط .. انسخه ثم ضعه فوق الوسم ]]> (ابحث عنه باستخدام ctrl+f)
      - الخط الآن موجود في مدونتك .. باقي خطوة واحدة وهي تفعيله
      - كما تعلم فإن كل نص في المدونة يجب أن يذكر حجمه ونوع الخط ولونه .. إلخ ..
      - إذا أردت أن تطبق نوع الخط الجديد على نص موجود في مدونتك (وليكن محتويات القائمة مثلا) عليك تكتب (في الأكواد طبعا) اسم الخط الجديد بدلا من القديم في الجزء المخصص ل"نوع الخط"
      - يتم ذلك بالبحث عن font-family: ثم كتابة اسم الخط الجديد بعدها .

      حذف
  8. اسف جدا اخي على الاطاله ولاكن عندما ابحث عن font-family: تضهر لي عدد كثير منها

    ردحذف
    الردود
    1. هذا هو المطلوب؛ اكتب اسم الخط الجديد أمام كل واحدة (بعد عمل الخطوات طبعا).

      حذف
  9. شرح رائع اخي
    ولكني اردت تعميم الخط في المدونه ولم اجد الوسم body {
    بالإضافه الي اني اريد اضافه خط للعربيه وخط اخر للانجليزيه وتعميمهم للمدونه هل يمكنني ذلك ؟

    ردحذف
    الردود
    1. لا أعتقد أنه بإمكانك التعميم ؛ عليك تغيير الخط يدويا أمام كل font-family:

      حذف
    2. فموضوع التعميم هذا لا ينطبق على كل القوالب

      حذف
  10. الخطوط لم تعد تعمل والسبب أنهاملفاتها لم تم حذفها من السيرفرات

    ردحذف
  11. المدونة التي تتصفحها الآن دليل على أن الخطوط مازالت تعمل بشكل جيد :)

    ردحذف