كيفية استخدام Google Fonts مع WordPress؟

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

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

على الرغم من وجود عدد من خيارات الطباعة المتاحة لك ، فإن أسهل طريقة للوصول إلى مئات الخطوط الاحترافية (مجانًا) هي باستخدام Google Fonts مع موقع WordPress الخاص بك.

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

1- ما هي خطوط Google WordPress ولماذا يجب عليك استخدامها؟

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

Google Fonts هي مكتبة للخطوط الليبرالية المرخصة تم إطلاقها في عام 2010. يمكنك استخدام مكتبة Google Fonts المذهلة عن طريق الاتصال بواجهة برمجة التطبيقات المتوفرة. الحقيقة المثيرة للاهتمام هي أنه يمكنك استخدام 877 خطًا محسّنًا للويب مجانًا. هذا غير معقول. يتميز بدليل ويب تفاعلي يسمح لك بالبحث عن أنواع معينة من الخطوط واختبارها في متصفح الويب الخاص بك.

استخدام WordPress Google Fonts له عدد من المزايا. إنها مجانية للاستخدام (حتى للمشاريع التجارية) ، ومُستضافة مسبقًا (لذلك لن تستهلك موارد الخادم الخاص بك) ، وقابلة للتنزيل (يمكنك استخدامها في الطباعة).

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

إذا كنت مستعدًا لتجديد طباعة موقعك بخطوط ويب سهلة الاستخدام ، فكل ما عليك فعله هو العثور على الخطوط المناسبة واستخدامها مع موقع WordPress الخاص بك.

2- كيفية إضافة خطوط Google إلى WordPress يدويًا

تأخذ Google Fonts معظم العبء الثقيل من تضمين عائلات الخطوط في موقع الويب الخاص بك. هذه مكتبة على الإنترنت يمكن استدعاؤها في أي مشروع ويب مثل أي برنامج نصي آخر لـ JS أو CSS.

في هذا القسم ، سأوضح لك كيفية تثبيت خطوط Google يدويًا على موقع WordPress.

الخطوة 1: ابحث عن الخط الذي تريد إضافته إلى موقع الويب الخاص بك

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

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

• هذه هي الخطوط التي تحتوي على خطوط صغيرة ملحقة بنهاية ضربات الحروف ، مثل Times New Roman و Courier .
• بلا الرقيق. الخطوط التي لا تحتوي على خطوط صغيرة في نهاية جرات الحروف هي خطوط sans-serif ، مثل Helvetica و Roboto .
• تستخدم خطوط العرض بشكل أساسي للنصوص الكبيرة مثل العناوين.
• الخطوط التي لها مظهر مكتوب بخط اليد مثل باسيفيكو .
• الخطوط التي لها نفس التباعد تمامًا بين جميع الأحرف ، مثل Source Code Pro .

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

لغرض هذا البرنامج التعليمي ، سأذهب مع Open Sans .

الخطوة 2: أضف الخطوط إلى اختيارك

الآن بعد أن عرفنا الخط الذي سنستخدمه ، دعنا نضيفه إلى اختيارنا. يمكنك القيام بذلك عن طريق النقر فوق علامة الجمع (+) في الزاوية اليمنى العليا من مربع عائلة الخطوط.

يمكنك إضافة أي عدد تريده من مجموعات الخطوط إلى اختيارك. بمجرد الانتهاء من الإعداد ، انقر فوق الشريط الأسود X Family Selected في أسفل الشاشة لعرض اختيارك.

الخطوة 3: تخصيص الخط

يفتح شريط X Family Selected نافذة بها علامتا تبويب - تضمين وتخصيص . قبل أن نقوم بتضمين عائلة الخطوط في موقع WordPress الخاص بنا ، سنتوقف لحظة لتخصيصها قليلاً.

من شاشة التخصيص ، حدد المربعات للأنماط واللغات التي ترغب في أن تتمكن من استخدامها على موقع الويب الخاص بك.

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

للحفاظ على اختيارنا للخط من التأثير على أوقات تحميل صفحات موقعنا ، قررنا اختيار بسيط - خفيف 300 و 400 عادي .

الخطوة 4: قم بتضمين خطوط Google في موقع WordPress الخاص بك

هناك عدة طرق يمكنك من خلالها إضافة خط مخصص إلى WordPress. سنوضح لك كيفية القيام بذلك باستخدام وظيفة wp_enqueue_style () نظرًا لأنها الطريقة الموصى بها لمواقع WordPress على الويب.

ابدأ بالعودة إلى علامة التبويب تضمين وانسخ الرابط (URL) الخاص بتحديد الخط إلى الحافظة الخاصة بك. في حالتنا ، عنوان URL الكامل هو: https://fonts.googleapis.com/css؟family=Open+Sans:300،400 .

بعد ذلك، سجل في لوحة القيادة وورد الخاص بك وداخل الذهاب إلى المظهر محرر وفتح ملف functions.php الموضوع الخاص بك النشط باستخدام عميل FTP وقم بإضافة التعليمة البرمجية التالية إليه.

 الوظيفة add_google_fonts () {

wp_enqueue_style ('add_google_fonts'، 'https://fonts.googleapis.com/css؟family=Open+Sans:300،400'، false)؛}

add_action ('wp_enqueue_scripts'، 'add_google_fonts') ؛

ملاحظة: ستحتاج إلى استبدال عنوان URL بعنوانك الخاص.

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

 h2 {

عائلة الخطوط: "Open Sans"، sans-serif؛

}

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

ما سر أهمية السرعة في تحسين محركات البحث وتجربة المستخدم؟

ستوضح لك نصائح الخبراء هذه كيفية تحسين سرعة مواقع WordPress الخاصة بك.

أوافق على شروط الخدمة وسياسة الخصوصية الخاصة بـ Cloudways

احصل على الكتاب الإلكتروني الآن!

اشكرك

كتابك الإلكتروني في طريقه إلى بريدك الوارد.

للقيام بذلك ، ما عليك سوى إضافة أنواع الخطوط الافتراضية المستضافة محليًا مثل Georgia أو Cambria أو Courier.

3- كيفية إضافة خطوط جوجل إلى ووردبريس باستخدام البرنامج المساعد

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

في هذا القسم ، سأوضح لك كيف يمكنك دمج خطوط Google في WordPress باستخدام المكون الإضافي Easy Google Fonts .

الخطوة 1: تثبيت وتنشيط البرنامج المساعد

قم بتسجيل الدخول إلى لوحة إدارة WordPress الخاصة بك وانتقل إلى الإضافات > إضافة جديد . ابحث عن Easy Google Fonts وقم بتثبيتها على موقع الويب الخاص بك.

بمجرد تثبيت المكون الإضافي ، انقر فوق الزر " تنشيط" لبدء استخدامه.

الخطوة 2: ابدأ باستخدام خطوط Google

بمجرد تنشيط المكون الإضافي إلى موقع الويب الخاص بك ، سيقوم تلقائيًا بإدراج أوراق الأنماط لخطوط Google التي تختار استخدامها. للبدء ، توجه إلى Appearance > Customize من لوحة إدارة WordPress.

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

يسمح لك بالتحكم في إعدادات الطباعة للفقرات والعناوين المختلفة (H1 إلى H6).

لنفترض أنك أردت تعديل خط Paragraphs على موقع الويب الخاص بك ، يتيح لك المكون الإضافي Easy Google Fonts تخصيص أنماطه ومظهره وموضعه. دعنا نلقي نظرة على خيارات الأنماط المختلفة التي يتميز بها.

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

لذلك ، إذا أردنا استخدام Open Sans ، فسنقوم بتعيين خيار البرنامج النصي على خيار لاتيني ، وخيار عائلة الخط على Open Sans ووزن الخط إلى عادي (وهو ما يعادل Regular 400 ).

فقط تحقق من كيفية تغيير الخط في شاشة المعاينة؟ تتمثل إحدى الفوائد الرئيسية لاستخدام المكوّن الإضافي Easy Google Fonts في أنه يمكنك معاينة شكل منشوراتك وصفحاتك مباشرة عند تحديد خط تريد استخدامه.

4- أفضل الخطوط للاستخدام

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

لنلقِ نظرة على أفضل خطوط Google المستخدمة على نطاق واسع وتوفر أفضل قابلية للقراءة.

1. لورا

Lora هي إحدى عائلة الخطوط المستخدمة على نطاق واسع نظرًا لقابليتها للقراءة ومتغيراتها.

2. عرض Playfair

توفر عائلة الخطوط هذه إمكانية قراءة أفضل للنص وهي مناسبة لكل من الويب والطباعة.

3. أرشيفو

هذا الخط ينتمي إلى عائلة محرف sans serif بشعة. له مظهر نظيف مناسب للنص الأساسي.

4. روبوتو

يعد Roboto أحد الخطوط الأكثر استخدامًا على الويب الحديث. يبدو رائعًا مع الحد الأدنى من تصميمات الويب ويوفر إمكانية قراءة ممتازة للمستخدمين.

5. مونتسيرات

تعود جذور مونتسيرات إلى الطباعة الحضرية في القرن العشرين. عائلة خطوط أخرى شائعة جدًا والتي تأتي مع عدد من المتغيرات.

6. روبيك

نظيفة للغاية ، Rubik هي عائلة خطوط san serif التي تخدم أكثر من 470،000 موقع ويب حول العالم.

7. مصدر بلا

يجب أن تكون قد استخدمت عائلة خطوط Source Sans لأنها تحتوي على أكثر من 4.18 مليار تكرار عبر Google Fonts API.

8. لاتو

Lato هو أيضًا محرف Sans Serif ويعتبر خطًا احترافيًا وواضحًا بواسطة مشرفي المواقع. يتم استخدامه في كل موضع من المحتوى تقريبًا.

9. بي تي سيريف

مع وجود أكثر من مليون موقع ويب يستخدم هذا الخط ، يعد PT Serif من بين أكثر خطوط Google استخدامًا. إنه مناسب لكل من الويب والمستندات المطبوعة.

10. فتح بلا

يعد خط Open Sans هو الأقرب إلى الكتابة البشرية مما يسهل قراءته على الويب وعلى الورق. قدمت Google Fonts API هذا الخط أكثر من 28.5 مليار مرة في أسبوع واحد فقط!

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

5- أفضل ممارسات استخدام خطوط جوجل في الموقع

إن دمج WordPress Google Fonts ليس علمًا صارخًا ، ولكن هناك دائمًا طريقتان لأداء أي مهمة - طريقة جيدة وأفضل طريقة.

دعنا نتحقق من أفضل الممارسات المتبعة في استخدام خطوط Google في WordPress.

- حدود سمك الخط: يعد تحديد المجموعة الكاملة لأوزان الخطوط أمرًا مغريًا ولكن له عيوبه. لكل متغير ، تصبح API أثقل وتستغرق وقتًا أطول لتحميل المجموعة الكاملة من أوزان الخطوط.

يتم تحميل هذا عادةً في بداية صفحة الويب ، وإذا لم يتم تحسينه ، فقد يؤدي ذلك إلى إبطاء وقت التحميل الأولي لصفحة الويب الخاصة بك.

-Host Fonts محليًا: خط Google عبارة عن مكتبة على الإنترنت يتم استضافتها في مكان آخر. على الرغم من أن له تأثيرًا ضئيلًا على أداء موقعك ، إلا أنه في حالة عدم توفره ، ستظل قادرًا على خدمة خطوط Google المحددة إذا تمت استضافتها محليًا.

-إمكانية الوصول مهمة: لم يعد خيارًا لتحسين موقع الويب الخاص بك للأشخاص الذين يعانون من ضعف البصر. تمكّنك خطوط Google من تصميم خطك بالطريقة الأكثر ملاءمة لهذا النوع من الزوار.

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

استنتاج

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

لقد أوضحنا لك كيف يمكنك إضافة خطوط Google إلى موقع الويب الخاص بك يدويًا باستخدام وظيفة wp_enqueue_style () وباستخدام المكوّن الإضافي Easy Google Fonts. نأمل أن تكون في وضع جيد الآن لتتقدم للأمور بنفسك.

هل سبق لك استخدام مكتبة الخطوط على موقع WordPress الخاص بك؟ نود أن نسمع منك ، لذا أخبرنا بالتعليق أدناه!