كيفية تحميل خطوط Google محليًا باستخدام WordPress: عنصر تحسين موجود في GTmetrix و Pingdom و Google PageSpeed ​​Insights

03.06.2020
ปลั๊กอินแคช 'كيفية تحميل خطوط Google محليًا باستخدام WordPress: عنصر تحسين موجود في GTmetrix و Pingdom و Google PageSpeed ​​Insights
0 21 мин.

إذا كان موقع WordPress الخاص بك يحتوي على خط جوجل أخطاء في GTmetrix/Pingdom, يجب أن يؤدي تحميل خطوط Google محليًا إلى إصلاحها.


لا يمكنك التحكم في بعض الموارد والنصوص البرمجية الخارجية ، مما يجعل من المستحيل ضغطها أو تصغيرها أو تحسينها. يمكن أن يؤثر ذلك بشكل خطير على سرعة WordPress الخاصة بك. واحدة من الموارد الخارجية الأكثر شيوعًا هي خطوط Google. إذا كنت قد قمت بالفعل بتكوين مكون إضافي لذاكرة التخزين المؤقت مثل WP Rocket أو WP Fastest Cache ، فقد تبدأ في ملاحظة الموارد الخارجية مثل الخطوط التي تؤثر على الدرجات + أوقات التحميل. هنا يأتي دور تحميل خطوط Google محليًا. يسمح هذا للمكون الإضافي لذاكرة التخزين المؤقت بضغط جميع الموارد المتعلقة بالخط (الخطوط) المخصصة.

خذ نسخة احتياطية كاملة من موقعك (أو على الأقل الملفات التي تقوم بتحريرها) قبل إجراء التغييرات.

جوجل-الخطوط- GTmetrix

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

في هذا المثال ، سنستخدم خط Roboto بوزن خطين: عادي (400) وغامق (700).

جوجل الخطوط اختيار

استخدام خطوط Google أقل – إبقاء خطوط Google الخاصة بك عند الحد الأدنى (خطوط أقل = طلبات أقل).

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

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

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

جوجل الخطوط تحميل

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

بعد ذلك ، سنقوم بتحويل ملفات الخطوط هذه (.ttf) إلى ملفات خطوط الويب. سأستخدم المتحول. انتقل إلى موقعهم ، انقر فوق أضف الخطوط, ثم تحميل أنواع الخطوط التي ستستخدمها فقط على موقع الويب الخاص بك. أنا استخدم Roboto-Regular.ttf و Roboto-Bold.ttf لذلك لدي أوزان منتظمة وجريئة. اترك الإعدادات بشكل افتراضي لأن WOFF و WOFF2 يغطيان جميع المتصفحات الرئيسية. الآن انقر فوق تحويل.

Transfonter-Google-Font-Conversion

حدد فقط أنواع الخطوط التي ستستخدمها على موقع الويب الخاص بك …

Google-Fonts-Conversion-Selection

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

بمجرد تحويل الخطوط ، يمكنك تنزيلها. في الملف المضغوط ، سيتضمن كل خط تنسيقات WOFF و WOFF2 (نظرًا لأننا قمنا بتنزيل خطين ، سيكون لدينا إجمالي 4 ملفات خطوط).

WOFF-Google-Font-Conversion

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

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

مثال:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

يحل محل yourwebsite.com مع موقع الويب الخاص بك (و HTTPS في حالة استخدام SSL). من الناحية المثالية ، اختبر جميع الروابط الأربعة وتأكد من صحة عناوين URL (وتأكد أيضًا من حفظها في مكان ما).

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

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

مكان وضع رمز CSS غير موضوعي ولكن يمكنك استخدام ورقة أنماط خارجية أو WordPress ” wp_enqueue_style وظيفة في function.php ، أو في بداية style.css ملف (أو لغة تنسيق ويب حسب الطلب إذا لديك واحدة). سأقوم بلصقه في ملف style.css الافتراضي للسمة. انسخ الرمز والصقه في ورقة الأنماط ، وغيّر أي عناوين URL نسبية إلى عناوين URL مطلقة.

عناوين URL الافتراضية في stylesheet.css:
src: تنسيق url (‘Roboto-Bold.woff2’) (‘woff2’),
تنسيق عنوان url (“Roboto-Bold.woff”) (“woff”) ؛

قم بتغيير هذه إلى:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/تنسيق Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
عنوان url (“http://yourwebsite.com/wp-content/uploads/fonts/تنسيق Roboto-Regular.woff ‘) (‘ woff ‘) ؛

بشكل أساسي ، ما عليك سوى تضمين عنوان URL للمجلد قبل اسم ملف الخط.

هذا اختياري ، ولكن إذا كنت تفضل ذلك ، قم بإنشاء فئة مخصصة لاستخدام الخط بسهولة في HTML الموجود. هنا سمينا فصولنا roboto_font و roboto_bold_font. للقيام بذلك ، أضف هذا إلى ملف style.css الخاص بك (بعد الرمز أعلاه):

.roboto_font {

عائلة الخطوط: “Roboto” ، “Arial” ، sans-serif ؛

}}

.roboto_bold_font {

عائلة الخطوط: “Roboto” ، “Arial” ، sans-serif ؛

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

}}

الخطوة 7: اختبار الخط

الآن قم بإنشاء صفحة اختبار ووضع التعليمات البرمجية التالية في محرر النص

اختبارات

اختبار الخط المخصص

اختبار الخط المخصص

اختبار خطوط جوجل

معاينة الصفحة. إذا قمت بذلك بشكل صحيح ، يجب أن ترى الخط المخصص الجديد! العنوان الأول هو الخط الافتراضي لموقعك على الويب ، والعنوان الثاني والثالث هما خطوط Google Fonts التي أضفناها:

خطوط جوجل المحلية

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

لجعل هذا الخط الافتراضي لموقعك الإلكتروني ، أضف CSS هذا إلى ملف style.css:

الجسم {

عائلة الخطوط: “Roboto” ، “Arial” ، sans-serif ؛

}}

كن حذرا! إذا كان لديك بالفعل خط مخصص ، فقد لا يظهر بشكل صحيح ويتطلب تصحيح أو تعديل خصائص عائلة الخط الحالية واستبدالها بهذا الخط بدلاً من ذلك.

الخطوة 9: احصل دائمًا على الخطوط الاحتياطية

من الممارسات السيئة تطبيق خط Google كعائلة خط. بدلاً من ذلك ، يجب أن يكون لديك العديد من الخطوط المحددة بما في ذلك الخطوط الشائعة مثل Arial و Times New Roman حتى يتمكن المتصفح من الرجوع إلى هذه الخطوط فقط في حالة عدم تحميل الخط أو يستغرق وقتًا أطول في التحميل.

بدون احتياطي:
عائلة الخطوط: “Roboto”؛

مع الخط الاحتياطي:
عائلة الخطوط: “Roboto”, اريال, بلا الرقيق؛

الآن ، في حالة فشل تحميل خطوط Google ، سيعود المتصفح إلى الخط Arial أو نوع خط sans-serif الافتراضي للنظام ولن يتسبب في أي مشاكل في عرض الخط.

إعادة اختبار موقع الويب الخاص بك (في GTmetrix)

من المفترض ألا ترى أي أخطاء في خطوط Google …

New-GTmetrix-Report.png

هل لديك أسئلة؟ مراسلتي على الخط.

أسئلة مكررة

&# x2705 ؛ كيف تسرع خطوط جوجل?

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

&# x2705 ؛ كيفية تحويل الخطوط ملفات الخطوط على شبكة الإنترنت?

نستخدم Transfonter.

&# x2705 ؛ ماذا عن الخطوط المخصصة Elementor?

يمكن لـ Elementor Custom Fonts أيضًا استضافة خطوط Google محليًا وهي مدمجة في Elementor Pro. يمكنك استخدام هذا لتحميل ملفات الخط.

&# x2705 ؛ الإضافات التي تساعد على تحسين الخطوط?

يمكن أن تساعدك WP Rocket و OMGF و Autoptimize و Perfmatters على تحسين الخطوط.

&# x2705 ؛ ماذا عن الجلب المسبق والخطوط المسبقة?

يمكن أن تسرع هذه الخطوط بمساعدة المتصفحات على توقعها بشكل أفضل. نستخدم المكوّن الإضافي Perfmatters من Kinsta للرسم المسبق للخطوط وتوصيلها مسبقًا ، ولكن يمكنك أيضًا استخدام WP Rocket أو المكوّن الإضافي Pre Party Resource Hints.

في صحتك,
أسامة

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector