طريقة استخدام خطوط جوجل العربية – Google Fonts

من المعروف بأن الخطوط تضيف جمالية تترافق مع التصميم, لكن اليوم اسمحوا لي أن أعرّفكم على الخطوط من وجهة نظر SEO.

من الأمور الدارجة في مجتمعات سيوز أن المحتوى هو الملك، حسناً.

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

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

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

أهم الخصائص في خطوط جوجل – Google Fonts

تعريف خطوط جوجل :

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

هناك نقاط اساسية علينا مراعاتها عندما نريد اختيار خط جديد لموقعنا وهنا سنذكر لكم هذه النقاط والتي تعتبر خصائص متميزة في خطوط جوجل.

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

هذه من أهم الخصائص التي يجب علينا مراعاتها عند القيام باختيار خط جديد لموقعنا.

طريقة استخدام خطوط جوجل العربية

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

الخطوة الأولى:

نتوجه للموقع الرسمي لـ Google Fonts ونستعرض الخطوط المتاحة وفي حال أعجبك احد الخطوط انتقل للخطوة الثانية.

ملاحظة: ذكرنا أنك في حال أردت استعراض الخطوط العربية التي تدعهما خطوط جوجل توجه إلى الصفحة الخاصة بالفترة التجريبية للخطوط.

الخطوة الثانية: 

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

بعد الحصول على المعلومات المطلوبة ننتقل للخطوة الثالثة.

الخطوة الثالثة: 

يتوفر طريقتين للتركيب:

الطريقة الأولى:

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

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

طريقة الاستخدام في داخل التصميم تكون عن طريق اضافة الكود التالي في ملف CSS إلى القسم المراد تغيير الخط به.

font-family: 'Droid Arabic Kufi', serif;

الطريقة الثانية:

نتوجه للصفحة الرئيسية ونقوم بتحريرها ونضيف الطود المشابه للكود التالي الذي حصلنا عليه من صفحة الخط بعد علامة </head>.

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300' rel='stylesheet' type='text/css'>

طريقة الاستخدام في داخل التصميم تكون عن طريق اضافة الكود التالي في ملف CSS إلى القسم المراد تغيير الخط به.

font-family: 'Roboto Condensed', sans-serif;