القائمة الرئيسية

الصفحات

Google fonts خطوط جوجل على موقعك او تحميلها و إستخدامها على الفوتوشوب




خطوط جوجل على موقعك او تحميلها و إستخدامها على الفوتوشوب


من أهم و أكثر النقاط التي تقاس بها جمالية المدونة أو حسن الموقع هو جمالية و رونق الخط المستعمل فيها ، لذلك اليوم سأشرح طريقة إستعمال خطوط جوجل 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> و ذلك لإستدعاء الخط  :

<link href="https://fonts.googleapis.com/css?family=Amiri" rel="stylesheet">

<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;
أتمنى أن تستفيدوا من الخطوط للحصول على مواقع و مدونات جميلة ،
الطريقة شغالة على البلوجر و الوردبريس و غيرها سكريبتات إدارة المحتوى .
نلتقي في تدوينة أخرى ، بالتوفيق للجميع




تعليقات