تطوير المواقعخطوط عربيةعام

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

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

يعد مظهر الموقع من أهم الأمور التي تخص أي موقع، فشكل الموقع ومظهره هو عامل من العوامل التي تجذب الزوار لموقعك، ومن أهم الوسائل لتحسين شكل الموقع هو الخطوط المستخدمة في الموقع، لذلك هناك الكثير من مصممي ومطوري المواقع يبحثون عن خطوط عربية للاستخدام على الويب، أو حتى خطوط لاستخدامها في تصاميمهم التي يقومون بها على برامج التصميم والجرافيكس مثل برنامج الفوتوشوب (Adobe Photoshop) وبرنامج (Adobe illustrator) وغيرها من الاستخدامات الكثيرة، وانا في هذه المقالة قمت بتجميع أفضل الخطوط العربية التي تم استخدامها على مواقع الانترنت وشبكة الويب عموماً، والتي تتميز بالسرعة والخفة والجمال والشكل المتميز التي تعطيه لموقعك أو مدونتك أو تصميمك، وقمت بتوفير روابط تحميل لهذه الخطوط داخل المقالة، وأرجو ان يعجبكم الموضوع ولا تنسوا أن تتركوا تعليق أسفل الموضوع.


يتوفر رابط تحميل لكل خط من الخطوط الموجودة في الموضوع لاستخدامه على جهازك.

  • خط السماء (Sky Font) :

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

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

كود الخط :

@import url("http://www.fontstatic.com/f=sky-bold,sky");

استعمال الخط :

/* للخط العادي */
font-family: 'sky';
/* للخط الثقيل */
font-family: 'sky-bold';

ويمكنك تحميل الخط بشكليه الاثنين من هنا .

  • خط دبي (Dubai Font) : 

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

خط دبي هو من الخطوط الرائعة التي يمكنك استخدامها في الفقرات وداخل المواضيع والمقالات، وأيضاً يمكن أن تعتمد عليه بشكل كامل في موقعك حيث أن هناك الكثير من المواقع تفعل ذلك، والخط متوفر بأربعة أشكال، الخفيف والعادي والمتوسط والثقيل، الخط صراحة يستحق التجربة.

كود الخط :

@import url("http://www.fontstatic.com/f=dubai,dubai-light,dubai-medium,dubai-bold");

استعمال الخط :

 

/* للخط العادي */
font-family: 'dubai';
/* للخط الخفيف */
font-family: 'dubai-light';
/* للخط المتوسط */
font-family: 'dubai-medium';
/* للخط الثقيل */
font-family: 'dubai-bold';

ويمكنك تحميل الخط بأشكاله الأربعة من هنا .

  •  خط كوكن (Cocon Font) :

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

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

كود الخط :

@import url("http://www.fontstatic.com/f=cocon-next-arabic");

استعمال الخط :

/* الخط العادي */
font-family: 'cocon-next-arabic';

ويمكنك تحميل الخط بشكله العادي من هنا .
  • خط الجزيرة (Al Jazeera Font) :

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

الجزيرة هو خط يستخدم للعناوين والنصوص والفقرات، وأيضاً الوصف ويستخدم لكل شيء تقريباً فهو خط شامل لكل الاستخدامات، ومتوفر بشكلين، الشكل العادي والثقيل، حتماً سيعجبك عند تجربته.

كود الخط :

@import url("http://www.fontstatic.com/f=jazeera,jazeera-light");

استعمال الخط :

/* للخط العادي */
font-family: 'jazeera';
/* للخط الثقيل */
font-family: 'jazeera-light';

ويمكنك تحميل الخط بشكليه
من هنا .
  • خط بهيج (Bahij Font) :

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

خط من الخطوط التي أفضل أنا شخصياً استخدامها، وخصوصاً في الفقرات والنصوص داخل المواضيع والوصف، ولكن لا أفضله في العناوين، ولكن يمكن استخدامه استخداماً متعدداً، والخط متوفر بشكل واحد وهو العادي، ويمكنك تجربته الآن ومتأكد أنه سيعجبك بكل تأكيد.

كود الخط :

@import url("http://www.fontstatic.com/f=bahij");

استعمال الخط :

/* الخط العادي */
font-family: 'bahij';

ويمكنك تحميل الخط بشكله العادي
من هنا .
  • خط جذور (Jozoor Font) :

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

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

كود الخط :

@import url("http://www.fontstatic.com/f=jooza");

استعمال الخط :

/* الخط العادي */
font-family: 'jooza';

ويمكنك تحميل الخط بشكله العادي
من هنا .
  •  خط جذور فلات (JF Flat) :

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

جذور فلات هو خط أيضاً جميل واستخدمته الكثير من الموقع، ويمكن أن يكون مألوفاً بالنسبة لك، او حتى شاهدته في موقع من المواقع عند تصفحك له، والمهم أن الخط يتوفر بشكل عادي، وأرجوا أن يعجبك بعد تجربته لهذا الخط.

كود الخط  :

@import url("http://www.fontstatic.com/f=flat-jooza");

استعمال الخط :

/* الخط العادي */
font-family: 'flat-jooza';

ويمكنك تحميل الخط بشكله العادي
من هنا .

  • خط القاهرة (Cairo) :

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

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

كود الخط :

@import url('https://fonts.googleapis.com/css?family=Cairo:400,700&subset=arabic');

استعمال الخط :

/* الخط  */
font-family: 'Cairo';

/* لتحديد الشكل الذي تريد الخط فيه تقوم باستخدام خاصية font-weight */ 

font-weight: normal;
font-weight: bold;

ويمكنك تحميل الخط بجميع أشكاله
من هنا .
  •  خط نوتو نسخ (Noto Naskh Arabic) :

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

خط نوتو هو خط قديم يستخدم في كثير من المواقع، ولكن كان له اسم آخر وهو Droid Arabic Naskh في الماضي، ولكن تم تطوير الخط وانتهي بهذلك الأسم، ويستخدم الخط كثيراً داخل المواضيع وفي الفقرات والنصوص والوصف يكون هذا أفضل استخدام له، ويتوفر بأشكال عديدة، وبعد تجربته لا تنسوا مشاركتنا برأيكم حول الخط.

كود الخط :

@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);

استعمال الخط :

/* الخط */
font-family: 'Noto Naskh Arabic';
/* يمكنكم استخدام خاصية Font-weight لتحديد الشكل الذي ترغبون باستخدامه */
font-weight: normal;
font-weight: bold;

ويمكنك تحميل الخط بجميع أشكاله
من هنا .
  •  خط نوتو الكوفي (Noto Kufi Arabic) :

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

خط نوتو الكوفي خط ستجده في كثير من المواقع ولكن باسم مختلف (Droid Arabic Kufi)، وحتى هنا في الموقع الخط متوفر بهذا الاسم، ولكن الخط جميل جداً، نعم هناك خطوط اجمل منه، ولكن يظل مكانه محفوظ، وهو يستخدم كثيراً في تطبيقات الهواتف والموبايلات، ومتوفر بالعديد من الأشكال، ارجوا أن يعجبكم بعد استخدامه.

كود الخط :

@import url('//fonts.googleapis.com/earlyaccess/notokufiarabic.css'); 

استعمال الخط :

/* الخط */
font-family: 'Noto Kufi Arabic'; 
/* يمكنكم استخدام خاصية Font-weight لتحديد الشكل الذي ترغبون باستخدامه */
font-weight: normal;
font-weight: bold;

ويمكنك تحميل الخط بجميع أشكاله
من هنا .
  • خط تشانجا (Changa) :

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

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

كود الخط :

 @import url('https://fonts.googleapis.com/css?family=Changa:400,700&subset=arabic'); 

استعمال الخط :

/* الخط */
font-family: 'Changa';
/* يمكنكم استخدام خاصية Font-weight لتحديد الشكل الذي ترغبون باستخدامه */
font-weight: normal;
font-weight: bold;

ويمكنك تحميل الخط بجميع أشكاله
من هنا .
  • خط بكرة (Bukra Font) :

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

خط بكرة هو خط أكثر من رائع يمكنك استخدامه العديد من الاستخدامات سواء داخل موقعك او حتى داخل تطبيقك او في تصاميمك بالطبع، فهو يعطي شكلاً مميزاً في أي استخدام له،  وهو ملائم أكثر للعناوين والنصوص المطلوب التركيز عليها، ويتوفر بعدة أشكال وبالنسبة للاستخدام على الويب، فيتوفر بشكلين العادي والثقيل، وإذا أعجبكم لا تنسوا أن تخبروني في التعليقات بالأسفل.

كود الخط :

@import url('https://cdn.rawgit.com/ahmedmontaser12/crazynet/89a2750a/Bukra-Font.css');

استعمال الخط :

/* الخط */
font-family: 'Bukra';
/* يمكنكم استخدام خاصية Font-weight لتحديد الشكل الذي ترغبون باستخدامه */
font-weight: normal;
font-weight: bold;

ويمكنك تحميل الخط بجميع أشكاله
من هنا .

إضافة الخط على موقعك أو مدونتك :

تقوم بوضع كود الخط أسفل وسم الـ <head> داخل وسم <style>  تقوم بعمله وإضافة الكود داخله كما بالصورة الموضوحة بالأسفل :

12 خط من أفضل الخطوط العربية للويب استخداما وتقييما لعام 2018
وبعد ذلك تقوم باستخدام الخط بنسخ كود الاستعمال وإضافته على اكواد الCSS الخاصة بموقعك، وإذا لم تكن تعرف كيف يتم ذلك يمكنك بكل بساطة الدخول إلى اليوتيوب والبحث عن شرح للخاصية font-family في لغة الCSS وهي الخاصية التي تختص بهذا الأمر ويمكنك الاستعانة بمطور ومبرمج مواقع او قوالب في حال لم تستطع، ويمكنكم التعليق بالاسفل في حالة واجهتكم مشكلة، وفي النهاية أرجوا ان يكون الموضوع قد أعجبكم وطبعاً الخط من العوامل التي تحدد مظهر موقعك أو مدونتك، ومن أهم الأمور التي تعجب الزوار، لذلك ينبغى عليك اختيار الخط الملائم لموقعك، والسلام عليكم ورحمة الله وبركاته.

.ibtn-1 {padding: 5px 15px !important;font-size: 14px;margin-top: -2px !important;}

Abdellatif

انا عبداللطيف سعيد مؤسس موقع و قناة كريزي نت علي اليوتيوب , محبي للعلوم و التكنولوجيا و قمت بأطلاق مدونة و قناة كريزي نت علي اليوتيوب لتكون موسوعة علمية تقنية لكل شيء اعرفه او سوف اتعلمه .

مقالات ذات صلة

‫2 تعليقات

اترك تعليقاً

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

زر الذهاب إلى الأعلى