استخدام خطوط جوجل العربية للويب في الموقع الالكتروني google fonts العلا ويب

استخدام خطوط جوجل العربية للويب في الموقع الالكتروني google fonts

ما هي خطوط جوجل :

قامت جوجل بدعم مجموعة خطوط على سيرفراتها و متاحة لإستخدام مواقع الويب و المطورين على حد سواء في مجموعة سطور بسيطة ترفق في ملف CSS عن طريق @import .

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

  1.  سرعة تحميل خطوط جوجل في الموقع الاكتروني
  2. خطوط متنوعة تصل إلى 600 خط
  3. بعض الخطوط تدعم اللغة العربية في تصميم موقع الويب
  4. خطوط جوجل متوافقة مع كافة الأجهزة
  5. يوجد خيارات متنوعة للتحكم بسمك الخط و دعم المطلوب فقط منها

هذه بعض مميزات خطوط جوجل في موقعك الالكتروني و هي مفيدة في تصميم المواقع متعددة اللغات multi language  website design

كيف استخدم خطوط جوجل في تصميم موقع الكتروني :

يوجد أكثر من طريقة لدعم خطوط جوجل في تصميم موقع الويب الخاص بك و إليك خطواط دعم خطوط جوجل google fonts في موقعك

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

نفتح صفحة جوجل فونت من الرابط

https://fonts.google.com/

 

و نختار الخط المناسب لموقعك الالكتروني

دعم خطوط جوجل في موقع الكتروني العلا ويب

 

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

نختار الخط المطلوب إضافته في الموقع الالكتروني بالضغط على زر زائد بجوار خط جوجل المطلوب و بالتالي يضاف للسلة في الأسفل و نختار كذلك السمك و الإختيارات المختلفة الموجودة

دعم خط جوجل العلا ويب

الخطوة الأخيرة :

دعم الخط الخاص بجوجل فونت في تصميم موقعك الالكتروني بإحدا الطريقتين التالييتين :

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

في ملف الإستايل style.css والذي يكون بالامتداد CSS ونضيف له الكود التالي في الملف  الإستايل الخاص بموقعك ( يختلف الكود حسب نوع الخط )

ملف استايل الموقع الالكتروني

@import url(‘https://fonts.googleapis.com/css?family=Cairo‘);

ولاستخدام في داخل تصميم الموقع الالكتروني نضيف الكود التالي في ملف CSS في المكان المطلوب تغيير خطه مثلا في الbody للموقع الالكتروني كامل

 

body{

font-family: ‘Cairo’, sans-serif;

}

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

في الصفحة الرئيسية لموقع الويب أو header الهيدر في موقع ووردبريس و نقوم بإضافة الكود التالي

تصميم موقع الكتروني و دعم خطوط جوجل

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

 

h1{

font-family: ‘Cairo’, sans-serif;

}

Comments are closed here.