كيف تستخدم خطوط جوجل Google Fonts على مدونتك ؟
معظم الخطوط التي تراها في المواقع هي خطوط تابعة لجوجل طبعاً هناك العديد من الخطوط الأخرى التي يمكن استخدامها في المواقع لكن ليست كل الخطوط صالحه للإستخدام على الويب بعضها مناسب فقط للإستخدام على الحاسوب
لذلك من المهم عندما تختار خط أن يكون مناسب للويب وله روابط لأنه صعب إن لم تكن تملك استضافة خاصة أن ترفع خطوطك بالتالي الأفضل أن تستخدم شئ جاهز وهذا ما توفره خطوط جوجل (Google Fonts)
لا تكثر من الإستخدام
يجب أن تعلم أن تلك الخطوط تعتبر من البرمجيات الثقيلة نسبياً فلا يجب أن تكثر من استخدام عدة خطوط على مدونتك يعني اكتفي بخط واحد , وعلى الأكثر اثنين
التركيب
ما سأتكلم عنه ليس الطريقة الوحيدة لإستخدام الخطوط لكنها الأسهل لك , كذلك كثيراً ما يتم تعديل هذا الموقع وشكله من جوجل لكن طريقة التطبيق واحدة فإن وجدت الشرح اختلف في الشكل مستقبلاً الخطوات واحدة حاول ايجاد فقط ما اختلف
1- ادخل الى خطوط جوجل من هنــــــا
2- اضغط على الخط الذي يعجبك لتنتقل الى الصفحة الخاصة به
3- ستجد الخط يعطيك مجموعة ستايلات مثل التالية , الأفضل أن تختار الذي يحمل الرقم 400 فهذا يعتبر السمك الشائع للخطوط
4- عندما تختار المظهر المناسب ستظهر لك خيارات اضافة الخط بشكل مثل التالي
5- انسخ الكود رقم 1 وأضفه بعد الوسم <head>
كذلك في بلوجر قد تجد رفض لكود الخط بسبب الجزء في الكود الذي به جملة &display-swap
كل ما عليك هو تغيير علامة & تلك بهذا الكود &
الإستخدام
بإتمام العملية السابقة أنت هكذا ركبت الخط باقي كيف تجعله فعال في قالبك
وهنا سنعود للكود رقم 2 في القالب
font-family
عليك أن تبحث عن هذا الكود في كامل قالبك وتغير فيه نوع الخط
مثلاً لنقل ان لديك الكود في قالبك هكذا
font-family: 'Roboto', sans-serif;
عليك أن تستبدله بالكود المنسوخ من الموقع
طيب قمت بهذا والخط تغير في أجزاء وأجزاء أخرى لم يتغير ؟
صيغة نوع الخط قد تكون مكتوبة بإسلوب آخر مثال
font:bold 16px Roboto;
العملية قد تحتاج منك عدة محاولات حتى تتعلم كيف تتعامل مع الخطوط
طبعا سيكون لديك مهمة اخرى وهي تغيير حجم الخط وهنا ستغير الرقم 16 ان كان كود الخط مكتوب كالسابق طبعا قد لا يكون مكتوب 16 قد يكون مكتوب نسبة مئوية أو وحدات قياس أخرى مثل 1.5em كل ما عليك هو أن تغير الأرقام لتغيير الحجم
كذلك قد يكون مكتوب الحجم بصيغة منفردة هكذا
font-size:16px;
لا فرق ستطبق نفس الفكرة
بارك الله فيك استاذنا
ردحذفتسلم أخي الحبيب 🌹
حذفشرح مميز كما عودتنا أ/ عمرو
ردحذفجزاك الله خيرًا عنا
الله يرفع قدرك أخي علي , جزاك الله بالمثل يا طيب
حذفشرح مميز ♥
ردحذفشكراً على الدعم اخي احمد الله يوفقك
حذف