top of page

التدوينة

  • صورة الكاتبDROP IDEA

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

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


خطوط جوجل

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

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

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

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



محتويات الموضوعToggle

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

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

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

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

  1. سرعة تحميل الخط.

  2. ثبات السيرفر المستضيف للخط.

  3. توافق الخط مع جميع الاجهزة.

  4. خيارات التحكم بالخط.

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

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

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

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

نتوجه للموقع الرسمي لـ 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;
٠ مشاهدة٠ تعليق

أحدث منشورات

عرض الكل

كيف تستقبل مدفوعات العملاء على موقعك أو متجرك الإلكترونى؟

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

ماهي طريقة إنشاء سيرفر استضافة مواقع بخطوات سهلة

طريقة إنشاء سيرفر استضافة مواقع حيث أن الاستضافة لها العديد من التعريفات، ولكن الاستضافة ببساطة هي خدمة تخزين البيانات والصور والملفات على موقع ويب. هذا المصطلح مألوف بالتأكيد لأذنيك، أليس كذلك؟ بالنس

أفضل برامج تصميم المواقع الويب بدون تشفير

أصبح إنشاء موقع ويب أسهل في عام 2021 حيث يتم تقديم بأفضل منصات CMS، وتسمح لك جميعها تقريبًا بإنشاء أي موقع ويب ومع ذلك، يبدو اختيار نظام إدارة المحتوى (CMS) أمرًا صعبًا بعض الشيء نظرًا لوجود العديد من

Hozzászólások


bottom of page