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

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

يوجد الآن 21235 مشاهدة التعليقات : 16

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

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

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

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

تعريف خطوط جوجل :
باختصار هي مجموعة من الخطوط المستضافة على سيرفرات Google، متاحة للاستخدام المباشر داخل ملفات Css عن طريق @import، تتميز بالثبات العالي والسرعة في التحميل، بالإضافة لتنوع الخطوط المدعومة والتي تصل لأكثر من 600 خط، ومن بينها خطوط تدعم اللغة العربي.

المميزات :

  • سرعة تحميل الخط
  • عدم حذف الخط المستضاف
  • توافق الخط مع جميع الاجهزة
  • خيارات التحكم بالخط
  • متوافق مع أي موقع

الآن قبل أن نتطرق لطريقة التركيب سأعرض عليكم قائمة أفضل الخطوط بأشكالها مرفقة مع أكوادها

Noto Sans Kufi Arabic
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/notosanskufiarabic.css);
font-family: 'Noto Sans Kufi Arabic', sans-serif;

الخط الأميري
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/amiri.css);
font-family: 'Amiri', serif;

Droid Arabic Naskh
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css)
font-family: 'Droid Arabic Naskh' , serif;

خط ثابت
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/thabit.css);
font-family: 'Thabit', serif;

خط شهرزاد
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/scheherazade.css);
font-family: 'Scheherazade', serif;

Noto Naskh Arabic UI
خلافًا للإعتقاد السائد فإن لوريم إيبسوم ليس نصًا عشوائيًا، بل إنّ له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، مما يجعله أكثر من 2000 عام في القدم.
@import url(http://fonts.googleapis.com/earlyaccess/notonaskharabicui.css);
font-family: 'Noto Naskh Arabic UI', serif;
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن  ]]></b:skin> ثم ضع كود الخط الذي تريد فوقه فقط المحدد بالأحمر
3. طريقة الاستخدام في داخل التصميم تكون عن طريق اضافة كود اسم الخط مثال : font-family: 'Amiri', serif; في القسم المراد تطبيق عليه الخط
هنا ننتهي مع الخطوط العربية التي تدعم التضمين في صفحات الويب، للمزيد من الخطوط سواء عربية أو أجنبية ندعوكم بزيارة خطوط جوجل
في حال كان لديك أي تسائل وتريد تطبيق الخط فقط اترك تعليق يوضح سؤالك، ولا تنسى أن تدعمنا بمشاركة التدوينة إذا نالت إعجابك
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

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

  1. حقا خطوط رائعة أعجبني خط الأميري سأستعمله بمدونتي الخاصة بالكتب
    سؤال اخي حسام الخط الذي تستعمله أنت في المواضيع هل هو Droid Arabic Naskh؟ وأشكرك كثيرا على هذه التدوينة

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

      حذف
  2. جميل حساب ومبهر بمواضيعك احب متابعتك دائما ^^
    تدوينة جميلة

    ردحذف
  3. والله خطوط جميلة حتمًا، حتى أنه تصلح
    في الإستخدام لترجمة الأنمي أيضًا :D شيء
    جميل، بس مكتبة الخطوط العربية في غِنًى عن ذلك
    ترا ~ هيهيهي! باركك الله حسام كن، بانتظار المزيد... :3

    ردحذف
  4. نحط الكود الاحمر قبل ولا بعد ؟ ]]>

    ردحذف
  5. أشكرك على مجهودك , و أنا من متابعيك أخي الكريم لكنني لم أفهم المرحلة التالة , واصل
    تحياتي

    ردحذف
    الردود
    1. يعني أن تضعه مثلا ضمن كود Css العناوين أو الموضوع أو تطبقه على المدونة بأكملها لكن يجب أن تكون لك دراية بالأكواد... تابع هذه التدوينة :
      http://www.ar1web.com/2014/08/blog-post_22.html
      فبها شرح إن واجهتك صعوبة فقط عد مجددا وسأساعدك

      حذف
  6. غير معرف3/30/2016

    مفهمتش الخطوة الاخيرة يعنى الخط لو عايز اغيره فى التدوينات اعمل ايه بالظبط ؟

    ردحذف
    الردود
    1. لإضافة خط للمواضيع اضف هذا الكود
      .post-body {font-family: Droid Arabic Naskh!important;}
      فوق ]]></b:skin>
      ثم غير Droid Arabic Naskh بإسم الخط الذي تريد

      حذف
  7. أخ حسام راسلتك من نموذج الاتصال لتنجز لي مدوّنة او بالاحرى تعدّل لي قالب بالسّعر الّذي تحدّده انت و الدفع سيكون مسبقا باذن الله و لا اعلم ان كانت رسائلي وصلتك
    فارجو ان تجيبني أخي الكريم لاغلق هذا الباب

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

      حذف
    2. سانتظر اتصالا منك عندما تكون جاهز و ارجو ان لا تنساني
      imed.kr@gmail.com
      https://web.facebook.com/garoui.imed
      بالله عليك اتّصل بي عندما عندما تكون متواجد و على كل حال ان كان في العمر بقيّة سانتظرك

      حذف
  8. لو سمحت اريد ان اعرف ما هى الجملة التى تكتبها كمثال ( التى فيها كلمة لوريم ابسون ) اراها فى مواقع كثير ولا ادرى لما يكتبونها .. ارجو الافادة

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم