خطوط جوجل على موقعك او تحميلها و إستخدامها على الفوتوشوب
من أهم و أكثر النقاط التي تقاس بها جمالية المدونة أو حسن الموقع هو جمالية و رونق الخط المستعمل فيها ، لذلك اليوم سأشرح طريقة إستعمال خطوط جوجل Google Fonts العربية أو الأجنبية الجميلة في مواقعكم و مدوناتكم أو حتى منتدياتكم لتصبح مميزة و حسنة المظهر .
لماذا نستعمل Google Fonts ؟
يلجأ الكثير من المبرمجين و مصممي محتوى الويب إلى إستعمال خطوط جوجل لعدة أسباب أهمها أنها جميلة و متعددة حيث يفوق عددها 800 عائلة من الخطوط font families و هذه أهم العوامل التي تدفعك لإختيار خطوط جوجل :
- خطوط جوجل مجانية الإستخدام .
- لن يكون لك أي مشاكل في الترخيص و الحقوق .
- يمكنك تقييد مجموعة الحروف إذا كنت لست بحاجة إلى أحرف معينة و هذا يقلل مدة التحميل .
- الخطوط سهلة التنفيذ و لن تواجه مشاكل في تضمينها .
- ضمان ظهور نفس الشكل و الخط لجميع المستخدمين .
- الخطوط مرفوعة على سيرفرات جوجل العالية الآداء و السرعة و لن تكون مضطرا لرفعها على سيرفرك
- جودة الخطوط رائعة و التحديث مستمر و يتزايد .
- توافق الخطوط مع جميع الآجهزة و الحواسيب .
- ثبات سيرفر الخطوط و ضمان بقائها طالما هي موجودة على سيرفرات جوجل .
كيفية إستخدام خطوط جوجل ؟
الآن يظهر لنا شريط أسود بالأسفل نضغط عليه كما في الصورة :
الآن ستظهر لنا النافذة التالية و هذا ما يهمنا :
توضيح عن ما تشير له الآسهم :
1 - لتحميل الخط على جهازك و إستعماله في تصميماتك على photoshop أو في ملفات word الخاصة بك .
2 - customize : إذا كنت تريد التعديل على خصائص الخط ( خط سميك ، خط مائل ، خط عريض ....... )
3 - @import : عند الدخول عليه سنجد كود للتضمين و ينسخ في ملف style.css او بين وسمي <style> هنا </style> .
4 - هذا الكود نضعه بين وسمي <head> هنا </head> .
5 - هذا الكود نضعه في خصائص div او span او أي وسم نريد ظهور الخط الذي إخترناه عليه .
هذه الطريقة لإستعمال خطوط جوجل على موقعك او مدونتك و الآن سأعرض بعض الخطوط العربية الجميلة مع أمثلة مباشرة :
هنا تجربة لخط أميري | زاوية مبرمج
و الآن لإضافتها على موقعك إختر ما تريد من القائمة التالية و أضفها بين وسمي <head> و ذلك لإستدعاء الخط :
4 - هذا الكود نضعه بين وسمي <head> هنا </head> .
5 - هذا الكود نضعه في خصائص div او span او أي وسم نريد ظهور الخط الذي إخترناه عليه .
هذه الطريقة لإستعمال خطوط جوجل على موقعك او مدونتك و الآن سأعرض بعض الخطوط العربية الجميلة مع أمثلة مباشرة :
هنا تجربة لخط أميري | زاوية مبرمج
هنا تجربة لخط شنغا | زاوية مبرمج
هنا تجربة لخط كيرو | زاوية مبرمج
هنا تجربة لخط ريم كوفي | زاوية مبرمج
هنا تجربة لخط لاليزار| زاوية مبرمج
هنا تجربة لخط لطيف| زاوية مبرمج
هنا تجربة لخط اريف رقعة| زاوية مبرمج
و الآن لإضافتها على موقعك إختر ما تريد من القائمة التالية و أضفها بين وسمي <head> و ذلك لإستدعاء الخط :
<link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Changa" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lalezar" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lateef" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa" rel="stylesheet">
آضف السطر التي تريده فقط و ليس كلها ، لكن إذا آردتها كلها أضف السطر التالي أفضل :
<link href="https://fonts.googleapis.com/css?family=Amiri|Aref+Ruqaa|Cairo|Changa|Lalezar|Lateef|Reem+Kufi" rel="stylesheet">
و الآن لإستعمال الخط على موقعك كل ما عليك فعله هو إضافة الكود التالي الى ستايل قالب موقعك او مدونتك :
font-family: 'Amiri', serif;font-family: 'Changa', sans-serif;font-family: 'Cairo', sans-serif;font-family: 'Reem Kufi', sans-serif;font-family: 'Lalezar', cursive;font-family: 'Lateef', cursive;font-family: 'Aref Ruqaa', serif;
أتمنى أن تستفيدوا من الخطوط للحصول على مواقع و مدونات جميلة ،
الطريقة شغالة على البلوجر و الوردبريس و غيرها سكريبتات إدارة المحتوى .
نلتقي في تدوينة أخرى ، بالتوفيق للجميع
تعليقات
إرسال تعليق