كيفية تحسين خطوط جوجل لوورد؟

كيفية-تحسين-جوجل-الخطوط-ل-الفسفور الابيض

من السهل استخدام خطوط Google في WordPress. إنه دليل مجاني لأكثر من 800 خط ويب يمكنك استخدامه على موقع الويب الخاص بك. خدمة Google Fonts هي خدمة مجانية عالية التصنيف تستخدمها الملايين من مواقع WordPress لتحسين مظهر موقع الويب الخاص بهم وسهولة استخدامه. إليك كيفية استخدام خطوط Google على WordPress دون المساس بأداء الموقع وتحسين نتائج PageSpeed .

الطريقة 1: استضافة خطوط Google على خادم WordPress الخاص بك

الخطوة 1: اختر خط Google

سيؤدي استخدام عدد أقل من خطوط Google إلى تقليل الطلبات (عدد أقل من الخطوط = عدد أقل من الطلبات).

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

الخطوة 2: تنزيل الخط

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

الخطوة 3: تحويل الخطوط إلى خطوط ويب

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

الخطوة 4: تنزيل ملفات الخطوط المحولة

بمجرد تحويل الخطوط ، يمكنك تنزيلها. نظرا لأنه تم تنزيل خطين على جهاز الكمبيوتر الخاص بنا ، سيكون لدينا ما مجموعه 4 ملفات خطوط في الملف المضغوط (نظرا لأننا قمنا بتنزيل خطين ، سيكون لدينا أربعة ملفات خطوط في الملف المضغوط).

الخطوة 5: تحميل ملفات الخط إلى ملفات WordPress

يرجى التأكد من تحميل ملفات خطوط الويب عبر FTP أو cPanel ، من الناحية المثالية في مجلد wp-content / uploads ، لتجنب الكتابة فوقها بواسطة السمة والتحديثات الأساسية. قمنا بتحميل الخطوط إلى مجلد "خطوط" (بحيث يتم فصلها عن الملفات الأخرى). يجب أن تكون قادرا على تنزيل الخطوط بعد فتح الروابط في متصفحك ، حتى تتمكن من تأكيد تحميلها بنجاح.

الخطوة 6: إضافة خط مخصص إلى CSS

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

يمكنك وضع رمز CSS في الوظائف.php أو بدء تشغيل ملف .css نمطك. يمكن استخدام ملف CSS خارجي أو وظيفة wp_enqueue_style WordPress في رمز CSS. في النمط الافتراضي .css ملف السمة ، سنقوم بلصقه. استبدل أي عناوين URL نسبية بعناوين URL مطلقة عن طريق نسخ/لصق الشفرة في ورقة الأنماط.

عناوين URL الافتراضية للنسق في ورقة الأنماط.css:

src: عنوان URL ('Roboto-Bold.woff2') التنسيق ('woff2')،

url('Roboto-Bold.woff') التنسيق ('woff');

التغيير إلى:

src: عنوان URL ('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff2') التنسيق ('woff2')،

عنوان url('https://demo.com/wp-content/uploads/fonts/Roboto-Regular.woff') التنسيق ('woff');

لاستخدام الخط بسهولة في HTML الحالي، قم بإنشاء فئة مخصصة.CSS الفئات roboto_font roboto_bold_font.

.roboto_font {

  عائلة الخط: "روبوتو" ، "أريال" ، بلا سيريف ؛ }

.roboto_bold_font {

عائلة الخط: "روبوتو" ، "أريال" ، بلا سيريف ؛

وزن الخط: غامق.

}

الخطوة 7: تعيين الخط الافتراضي

لجعل هذا الخط هو الخط الافتراضي على موقع الويب الخاص بك ، يجب عليك تضمين رمز CSS في ملف .css النمط الخاص بك.

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

الخطوة التالية هي تحميل ورقة الأنماط .css ملف حصلت عليه داخل الملف المسمى ورقة الأنماط .css وإضافة CSS. سيجعل رمز CSS أدناه خطوطك تعمل مع CSS الحالي الخاص بك وتكون جاهزة للاستخدام بمجرد إدخالها. يمكنك استخدام ورقة أنماط خارجية أو وظيفة WordPress wp_enqueue_style لإدراج أوراق الأنماط في قائمة الانتظار.

الطريقة 2: التحميل المسبق لخطوط الويب - فوق تحسين الطية 

إذا كنت تستخدم خطوط Google ، فقد تحتاج إلى الرجوع إلى ورقة الأنماط التي أعدتها Google وأرسلتها إلى موقع WordPress على الويب من خوادم Google. عند استخدام أداة مطوري البرامج التي يقدمها Google Chrome لفحص موقع الويب الخاص بك ، قد تحصل على لمحة عن العملية وراء الكواليس. هناك احتمال أن ترى مدخلين لخطوط Google داخل المصدر. 

يرجى الاطلاع على الصورة المرفقة هنا.

التحميل المسبق لخطوط الويب

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

عنوان URL للخطوط

يشير هذا إلى أنه يتعين على المستخدم زيارة fonts.gstatic.com للحصول على الوزن اللازم للخط إذا تم استخدام وزن خط مختلف. قد تؤدي هذه الخطوة إلى إطالة الوقت الذي تستغرقه صفحة WordPress الخاصة بك للتحميل. 

لذلك ، قم بالوصول إلى الوظائف .php ملف السمة الحالية الخاصة بك ، وأدخل رمز PHP التالي داخل الوظيفة المسؤولة عن إدارة الخطوط.

الدالة twentyeleven_resource_hints( $urls, $relation_type ) {

   إذا ( wp_style_is( 'rumi-fonts', 'queue' ) & 'preconnect' === $relation_type ) {

      $urls[] = صفيف(

         "href" = > "https://fonts.gstatic.com" ،

         "عبر المنشأ"

      );

   }

   $urls العودة ؛

}

add_filter ( "wp_resource_hints" ، "twentyeleven_resource_hints" ، 10 ، 2 ) ؛

الطريقة 3: تحسين خطوط Google WordPress باستخدام المكون الإضافي

المكونات الإضافية ، كما هو الحال مع معظم المهام المتعلقة ب WordPress ، تجعل من الأسهل بكثير تحسين خطوط Google. بالإضافة إلى ذلك ، سيعتنون بجانب البرنامج نيابة عنك ، لذلك لن تضطر إلى القلق بشأن المكان الذي يجب أن تذهب إليه الشفرة في النظام.

إذا كان لديك خطوط Google مثبتة على موقع WordPress الخاص بك وقمت بإجراء اختبار أداء باستخدام PageSpeed Insights أو GTmettrix ، فستتلقى رسالة الخطأ التالية: fonts.googleapis.com. 

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

يمكن استخدام مكون إضافي مجاني لتثبيت نفسه. إنه – OMGF | استضافة خطوط Google محليا

بعد الانتهاء من التثبيت ، سيبدأ المكون الإضافي على الفور في تبديل البرنامج النصي ل WordPress wp en queue ()Google Fonts إلى وظيفة wp head() . هذا المكون الإضافي يفعل كل شيء من تلقاء نفسه. 

يمكنك العثور على المزيد من هذه المقالات في Seahawk Media.

المشاركات ذات الصلة

كومال بوثرا 4 فبراير، 2023

ما هو الخادم الوكيل؟

الخادم الوكيل هو جهاز كمبيوتر يعمل كوسيط بين جهاز الكمبيوتر الخاص بك و

استضافة مسرد المصطلحات
كومال بوثرا 3 فبراير، 2023

التسويق عبر محركات البحث (SEM) 

التسويق عبر محركات البحث ، أو SEM ، هو شكل من أشكال التسويق عبر الإنترنت يستخدم الإعلانات المدفوعة

مسرد مصطلحات كبار المسئولين الاقتصاديين
كومال بوثرا 2 فبراير، 2023

دراسة حالة: مابري للحلول التقنية

Mabry Tech هي شركة متخصصة في الاستشارات وتطوير الحلول المبتكرة للشركات. مابريس

دراسة حالة

ابدأ مع Seahawk

اشترك في تطبيقنا لعرض أسعارنا والحصول على خصومات.