خطوط جوجل Google Fonts هي مكتبة من الخطوط المجانية التي أصدرتها شركة جوجل عام 2010 وأتاحتها لمُستخدمي الإنترنت بشكل مجاني للتحميل أو للإستخدام في تصميم المواقع الاكترونية. والتي يستخدمها أغلبنا حاليآ في تصميم المواقع وتحديدآ الـ CSS لإضافة مظهر جمالي للموقع.
Google Fonts (previously called Google Web Fonts) is a library of 991 free licensed font families, an interactive web directory for browsing the library, and APIs for conveniently using the fonts via CSS and Android. “wiki”
ما هي خطوط جوجل ؟
- خطوط جوجل Google Fonts هي مكتبة من الخطوط المستضافة على سيرفرات Google.
- تم إنشاء هذه المكتبة عام 2010.
- كانت تعرف قديمآ بإسم Google Web Fonts والآن تعرف بإسم Google Fonts.
- يبلع عدد هذه الخطوط 991 خط.
- مجانية ومُتاحة للاستخدام المباشر داخل ملفات CSS عن طريق @import.
- تتميز بالثبات العالي والسرعة في التحميل.
- منها خطوط كثيرة تدعُم اللغة العربية.
مُميزات خطوط جوجل عن باقي الخطوط :
- سرعة تحميل الخط.
- ثبات السيرفر المستضيف للخط ” سيرفرات جوجل”.
- توافق الخط مع جميع الاجهزة.
- خيارات التحكم بالخط.
تحميل خطوط جوجل :
بإمكانك أن تختار الخط المُناسب لك بإتباع الخطوات التالية :
- التوجه الي موقع خطوط جوجل الرسمي من خلال هذا الرابط : https://fonts.google.com
- بإمكانك إختيار لغة الخط والتصنيف وخصائص الخط, ولكني لا أقوم بهذه الخطوه غالبآ, ولكنني فقط أختار اللغة وأتوجه مباشرة لاختيار الخط المُناسب لك.
- بإمكانك تحميل الخط بالضغط علي Download family في أعلي يمين الصفحة.
إستخدام خطوط جوجل العربية في الموقع الإلكتروني :
- بداية توجه الي صفحة الخطوط العربية التي تدعمها جوجل من خلال هذا الرابط : https://fonts.google.com/earlyaccess
- إختار الخط المُناسب.
- إستخدم أحد هاتين الطريقتين :
الطريقة الأولى :
توجه لملف الستايل الرئيسي بموقعك الإلكتروني والذي يكون بالامتداد CSS وأضف اليه الكود التالي في رأسية الملف, مع ملاحظة أن لكل خط كود مشابه مع اختلاف اسم الخط داخل الكود ويمكنك معرفة كود الخط من الصفحة السابقة التي تدعم الخطوط العربية.
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
الطريقة الثانية :
نتوجه للصفحة الرئيسية ونقوم بتحريرها ونضيف الكود المشابه للكود التالي الذي حصلنا عليه من صفحة الخط بعد علامة </head>.
في حالة إستخدام الووردبريس نتوجه إلي ملف الـ header الخاص بالقالب من هذا المسار :
public_html/Domain-name.com/wp-content/themes/Theme-Name/header.phpمع استبدال Domain-Name بإسم موقعك, وإستبدال Theme-Name باسم القالب الذي تستخدمه.
تُم نضيف الكود المشابه للكود التالي الذي حصلنا عليه من صفحة الخط بعد علامة </head>.
<link href='http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css' rel='stylesheet' type='text/css'/>
كود CSS :
طريقة الاستخدام في داخل التصميم تكون عن طريق اضافة الكود التالي في ملف CSS إلى القسم المراد تغيير الخط به وهنا علي سبيل المثال استخدمت body, h1, h2, h3, h4, h5, h6 .
body, h1, h2, h3, h4, h5, h6
{
font-family: 'Droid Arabic Naskh', serif;
}
أكواد جميع خطوط جـوجل العربية :
وفي الختام إليكم أكواد تضمين خطوط جوجل كاملة من خلال موقع W3schools.com حيث ستجد كود الهيدر وكود CSS لاي خط من خطوط جوجل البالغ عددها 991 خط.