يعد مظهر الموقع من أهم الأمور التي تخص أي موقع، فشكل الموقع ومظهره هو عامل من العوامل التي تجذب الزوار لموقعك، ومن أهم الوسائل لتحسين شكل الموقع هو الخطوط المستخدمة في الموقع، لذلك هناك الكثير من مصممي ومطوري المواقع يبحثون عن خطوط عربية للاستخدام على الويب، أو حتى خطوط لاستخدامها في تصاميمهم التي يقومون بها على برامج التصميم والجرافيكس مثل برنامج الفوتوشوب (Adobe Photoshop) وبرنامج (Adobe illustrator) وغيرها من الاستخدامات الكثيرة، وانا في هذه المقالة قمت بتجميع أفضل الخطوط العربية التي تم استخدامها على مواقع الانترنت وشبكة الويب عموماً، والتي تتميز بالسرعة والخفة والجمال والشكل المتميز التي تعطيه لموقعك أو مدونتك أو تصميمك، وقمت بتوفير روابط تحميل لهذه الخطوط داخل المقالة، وأرجو ان يعجبكم الموضوع ولا تنسوا أن تتركوا تعليق أسفل الموضوع.
يتوفر رابط تحميل لكل خط من الخطوط الموجودة في الموضوع لاستخدامه على جهازك.
- خط السماء (Sky Font) :
هذا الخط هو من أكثر الخطوط التي استخدمها، لا أعرف لماذا ولكن الخط صراحة رائع جداً في العناوين وأيضاً في بعض النصوص المعينة التي تظهر بشكل أكثر من رائع، وهذا الخط عند الإطلاع عليه تحسه خط عصري أو ما شابه، والخط متوفر بشكلين العادي والثقيل.
كود الخط :
@import url("http://www.fontstatic.com/f=sky-bold,sky");
استعمال الخط :
/* للخط العادي */font-family: 'sky';/* للخط الثقيل */font-family: 'sky-bold';
ويمكنك تحميل الخط بشكليه الاثنين من هنا .
- خط دبي (Dubai Font) :
خط دبي هو من الخطوط الرائعة التي يمكنك استخدامها في الفقرات وداخل المواضيع والمقالات، وأيضاً يمكن أن تعتمد عليه بشكل كامل في موقعك حيث أن هناك الكثير من المواقع تفعل ذلك، والخط متوفر بأربعة أشكال، الخفيف والعادي والمتوسط والثقيل، الخط صراحة يستحق التجربة.
كود الخط :
@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) :
خط كوكن من الخطوط الغريبة التي تستخدمها بعض المواقع والمدونات، لا أعرف هل ذلك لبساطة الشكل أم أن الخط جميل، أو حتى يمكن أن يكون بسبب إعجاب الزوار به، والخط متوفر بشكل واحد وهو الشكل العادي، يمكنكم تجربته إذا أعجبكم.
كود الخط :
@import url("http://www.fontstatic.com/f=cocon-next-arabic");
استعمال الخط :
/* الخط العادي */font-family: 'cocon-next-arabic';
ويمكنك تحميل الخط بشكله العادي من هنا .
- خط الجزيرة (Al Jazeera Font) :
الجزيرة هو خط يستخدم للعناوين والنصوص والفقرات، وأيضاً الوصف ويستخدم لكل شيء تقريباً فهو خط شامل لكل الاستخدامات، ومتوفر بشكلين، الشكل العادي والثقيل، حتماً سيعجبك عند تجربته.
كود الخط :
@import url("http://www.fontstatic.com/f=jazeera,jazeera-light");
استعمال الخط :
/* للخط العادي */font-family: 'jazeera';/* للخط الثقيل */font-family: 'jazeera-light';
ويمكنك تحميل الخط بشكليه من هنا .
- خط بهيج (Bahij Font) :
خط من الخطوط التي أفضل أنا شخصياً استخدامها، وخصوصاً في الفقرات والنصوص داخل المواضيع والوصف، ولكن لا أفضله في العناوين، ولكن يمكن استخدامه استخداماً متعدداً، والخط متوفر بشكل واحد وهو العادي، ويمكنك تجربته الآن ومتأكد أنه سيعجبك بكل تأكيد.
كود الخط :
@import url("http://www.fontstatic.com/f=bahij");
استعمال الخط :
/* الخط العادي */font-family: 'bahij';
ويمكنك تحميل الخط بشكله العادي من هنا .
- خط جذور (Jozoor Font) :
جذور هو خط من الخطوط القديمة في الويب، والتي استخدمتها الكثير من المواقع من قبل، وهو يعد من الخطوط الجميلة التي يحبها الزوار كثيراً، ويتوفر بشكله واحد عادي، ويمكنك تجربته وأرجوا أن ينال إعجابكم.
كود الخط :
@import url("http://www.fontstatic.com/f=jooza");
استعمال الخط :
/* الخط العادي */font-family: 'jooza';
ويمكنك تحميل الخط بشكله العادي من هنا .
- خط جذور فلات (JF Flat) :
جذور فلات هو خط أيضاً جميل واستخدمته الكثير من الموقع، ويمكن أن يكون مألوفاً بالنسبة لك، او حتى شاهدته في موقع من المواقع عند تصفحك له، والمهم أن الخط يتوفر بشكل عادي، وأرجوا أن يعجبك بعد تجربته لهذا الخط.
كود الخط :
@import url("http://www.fontstatic.com/f=flat-jooza");
استعمال الخط :
/* الخط العادي */font-family: 'flat-jooza';
ويمكنك تحميل الخط بشكله العادي من هنا .
- خط القاهرة (Cairo) :
خط القاهرة هو من الخطوط التي توفرها شركة جوجل، حيث قام مصمم خطوط عربي من مصر بتصميم هذا الخط الرائع، السريع والمتوافق مع جميع المواقع وجميع الاستخدامات، ويتوفر بأشكال كثيرة، فقط يمكنك استخدام شكلين العادي والثقيل، وأرجوا أن يعجبكم الخط.
كود الخط :
@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) :
خط نوتو هو خط قديم يستخدم في كثير من المواقع، ولكن كان له اسم آخر وهو 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) :
خط نوتو الكوفي خط ستجده في كثير من المواقع ولكن باسم مختلف (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) :
خط تشانجا هو خط جديد مقدم من جوجل، قام مصمم معين بتصميم الخط بشكله الحالي، والذي يفضله الكثير من المصممين والمطورين في تصاميمهم وبرامجهم، وهناك العديد من المواقع التي تستخدم هذا الخط، وأيضاً بعض التطبيقات على الهاتف، وأيضاً الخط متعدد الإستخدامات سواء في العناوين والنصوص والفقرات وغيرها، وهو متوفر بعدة أشكال وهو ما يجعله كما قلنا متعدد الاستخدامات، وانا شخصياً استخدمته في أكثر من تصميم لي، وأرجوا أن يعجبكم الخط.
كود الخط :
@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) :
خط بكرة هو خط أكثر من رائع يمكنك استخدامه العديد من الاستخدامات سواء داخل موقعك او حتى داخل تطبيقك او في تصاميمك بالطبع، فهو يعطي شكلاً مميزاً في أي استخدام له، وهو ملائم أكثر للعناوين والنصوص المطلوب التركيز عليها، ويتوفر بعدة أشكال وبالنسبة للاستخدام على الويب، فيتوفر بشكلين العادي والثقيل، وإذا أعجبكم لا تنسوا أن تخبروني في التعليقات بالأسفل.
كود الخط :
@import url('https://cdn.rawgit.com/ahmedmontaser12/crazynet/89a2750a/Bukra-Font.css');
استعمال الخط :
/* الخط */font-family: 'Bukra';/* يمكنكم استخدام خاصية Font-weight لتحديد الشكل الذي ترغبون باستخدامه */font-weight: normal;font-weight: bold;
ويمكنك تحميل الخط بجميع أشكاله من هنا .
إضافة الخط على موقعك أو مدونتك :
وبعد ذلك تقوم باستخدام الخط بنسخ كود الاستعمال وإضافته على اكواد الCSS الخاصة بموقعك، وإذا لم تكن تعرف كيف يتم ذلك يمكنك بكل بساطة الدخول إلى اليوتيوب والبحث عن شرح للخاصية font-family في لغة الCSS وهي الخاصية التي تختص بهذا الأمر ويمكنك الاستعانة بمطور ومبرمج مواقع او قوالب في حال لم تستطع، ويمكنكم التعليق بالاسفل في حالة واجهتكم مشكلة، وفي النهاية أرجوا ان يكون الموضوع قد أعجبكم وطبعاً الخط من العوامل التي تحدد مظهر موقعك أو مدونتك، ومن أهم الأمور التي تعجب الزوار، لذلك ينبغى عليك اختيار الخط الملائم لموقعك، والسلام عليكم ورحمة الله وبركاته.
ليست هناك تعليقات:
إرسال تعليق