تثبيت وتخصيص خطوط  Google لبلوجر

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



تثبيت مصادر الخطوط

سنقوم بزيارة الصفحة الرئيسية لخطوط Google وإضافة جميع المصادر التي سنحتاج إليها بالضغط على رمز الإضافة:

تثبيت وتخصيص خطوط  Google لبلوجر
تثبيت وتخصيص خطوط  Google لبلوجر

أقترح عدم الأسراف في استخدام كمية كبيره من الخطوط للحصول على أداء أفضل لأن أستخدام الكثير من الخطوط يؤدي الي بطئ المدونه . سيتم إدراج كل مصدر محدد في أسفل اليمين:

تثبيت وتخصيص خطوط  Google لبلوجر
تثبيت وتخصيص خطوط  Google لبلوجر

في علامة التبويب "CUSTOMIZE" ، يمكننا تهيئة الخط وسمك الخط ، وفي "EMBED" ، نجد طرق إدراج الخطوط في أي صفحة ، في هذا الجزء نقوم بنسخ كامل الموسم <link/>

تثبيت وتخصيص خطوط  Google لبلوجر
تثبيت وتخصيص خطوط  Google لبلوجر

 سنقوم الآن بإدراج كود المصدر هذا في رأس المدونة. سنلصقه أسفل الوسم <head>. في حالة بلوجر ، من الضروري إغلاق علامة الارتباط عن طريق إضافة / في النهاية كالمثال التالي:
<link href="https://fonts.googleapis.com/css?family=Amiri|Cairo&display=swap" rel="stylesheet">

بهذه الطريقة نتجنب الخطأ في  بلوجر وسيٌسمح لنا بحفظ التغييرات. وذلك لأن بلوجر يستخدم XML بشكل صارم  ، لذلك من الضروري إغلاق جميع العلامات بالشكل الصحيح والمناسب.

أستخدام مصادر الخطوط

لاستخدام المصادر نلجأ إلى خاصية . في المثال التالي ، قمت بإنشاء فئة تسمي font وقمت بتضمين خاصية Font-Family مع الخط "Cairo":

.font { font-family: 'Cairo', sans-serif; }

الآن سيكون يكفي فقط إضافة font للفئة إلى علامة html ، والتي ستمنحك نمط الخط "Cairo". هنا مثال:

<p class="font">هذا الخط هوا خط Cairo</p> }

يمكنك أيضًا إضافة خاصية font-family إلى أي قاعدة في css. على سبيل المثال ، مع رمز css التالي ، أوضح للمتصفح أن جسم الصفحة بالكامل ستعمل بالخط  Tajawal:

body { font-family: 'Tajawal', sans-serif; }

تحسين سرعة المدونة

إذا كنت أحد أولئك الذين يسعون لتحسين المدونة وتحقيق درجة جيدة في Google Page Speed ، فيجب ألا يتم تحميل المصادر بين الوسم <head> ، لأن الاختبار سيعود بالاقتراح التالي:

قم بإزالة JavaScript الذي يحظر العرض و CSS من محتوى النصف العلوي من الصفحة

إذا كنت تريد تجنب بطئ المدونة  وتحسين الأداء ، فقم بنسخ كود css الخاص بـ Google Fonts والصقه مباشرةً في مدونتك.  في @font-face أضف خاصية font-display. مثال:

@font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: local('Tajawal'), local('Tajawal-Regular'), url(https://fonts.gstatic.com/s/tajawal/v2/Iura6YBj_oCad4k1nzSBC45I.woff2) format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }

خفض الوزن

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

https://fonts.googleapis.com/css?family=Tajawal&&text=Mint

سوف يقوم الرمز أعلاه بتحميل الأحرف M و i و n و t  فقط ، وبما أنها تشكل النص المشار إليه. يُسمح أيضًا باستخدام أحرف خاصة ومسافات فارغة. مثال:

https://fonts.googleapis.com/css?family=Tajawal&text=%C2%مرحباً%20بكم!

أعرف أنه يقرأ بشكل غريب ، لكن ما فعلته هو رمز الأحرف الخاصة لاستخدامها في عناوين url. إذا كنت تريد أن تفعل نفس الشيء ، فإنني أقدم لك الأداة التالية:


تشفير النص الخاص بـ URL


تحميل الأنماط 

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


https://fonts.googleapis.com/css?family=Source+Sans+Pro:900&effect=3d

الآن للاستفادة من التأثيرات ، يتم استخدام الفئة font-effect-NAME في علامة html ، حيث يتم استبدال NAME بأسم التأثير الذي يكون في هذه الحالة سنستخدم التائثير 3D ثلاثي الأبعاد ، مثال:

<span class="font-effect-3d">Google</span>

 يمكننا أيضًا مواصلة إضافة الأنماط ، بصرف النظر عن الأنماط التي ستضيفها خطوط google لتفسير التأثير المحدد. سيبدو الرمز أعلاه كما يلي:


Google

يمكنك أيضًا ربط التأثيرات باستخدام شريط عمودي |. في هذا المثال ، أقوم بتسلسل التأثيرات ثلاثية الأبعاد و anaglyph.

https://fonts.googleapis.com/css?family=Open+Sans&effect=3d|anaglyph

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

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

اقرأ أيضًا: