كيفية إضافة 800 خط Google في سمة WordPress يدويًا

نشرت: 2022-10-16

بافتراض أنك ترغب في الحصول على مقدمة حول كيفية إضافة 800 خط Google في سمات WordPress يدويًا: يمكن إضافة 800 خط Google في سمات WordPress يدويًا عن طريق تنزيل مكتبة Google Fonts أولاً. ثانيًا ، فك ضغط الملف وتحميل الخطوط إلى خادم الويب الخاص بك. أخيرًا ، قم بإضافة كود CSS إلى ورقة أنماط WordPress Theme الخاصة بك.

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

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

كيف يمكنني إضافة خط Google مخصص إلى WordPress؟

الائتمان: Crunchify

تعد إضافة خط Google المخصص إلى WordPress عملية بسيطة نسبيًا. أولاً ، تحتاج إلى العثور على خط Google مخصص تريد استخدامه على موقع WordPress الخاص بك. هناك عدد من المواقع التي تقدم خطوطًا مخصصة مجانية ، مثل https://www.fontsquirrel.com/. بمجرد العثور على الخط الذي يعجبك ، ستحتاج إلى تنزيله على جهاز الكمبيوتر الخاص بك. بعد ذلك ، تحتاج إلى تحميل ملف الخط إلى موقع WordPress الخاص بك. يمكنك القيام بذلك عن طريق الانتقال إلى المظهر> صفحة المحرر في منطقة إدارة WordPress الخاصة بك. في هذه الصفحة ، تحتاج إلى تحديد موقع ملف Stylesheet (style.css) في الشريط الجانبي الأيمن والنقر فوقه لتحديده. بمجرد فتح ملف Stylesheet (style.css) ، ستحتاج إلى التمرير لأسفل إلى أسفل الملف وإضافة الكود التالي: @ font-face {font-family: 'Custom Font Name'؛ src: تنسيق url ('custom-font-url') ('truetype') ؛ } تأكد من استبدال "Custom Font Name" بالاسم الفعلي للخط الذي تستخدمه ، و "custom-font-url" بعنوان URL الخاص بملف الخط الذي قمت بتحميله إلى موقع WordPress الخاص بك. بمجرد إضافة الرمز ، ستحتاج إلى حفظ التغييرات وتحميل ملف Stylesheet (style.css) المحدث إلى الخادم الخاص بك. يمكنك الآن استخدام خطك المخصص في أي من قواعد CSS الخاصة بموقع WordPress الخاص بك عن طريق تحديد خاصية "font-family" على أنها "Custom Font Name".

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

ستحصل على عرض توضيحي لكيفية القيام بذلك في المثال التالي باستخدام دالة WordPress_enqueue_style (). يمكنك البدء في استخدام الخط الذي أضفته للتو باستخدام خيارات الطباعة في قالبك. فيما يلي طريقة بديلة (أقل تكلفة) لدمج خطوط Google في موقع WordPress الخاص بك. يمكنك تعديل خصائص البرنامج النصي ومجموعة الخط ووزن الخط والزخرفة وتحويل النص بالانتقال إلى علامة التبويب الأنماط. عندما تختار خطًا ، ستتمكن من المعاينة الحية لكيفية ظهور منشوراتك وصفحاتك. يعد Roboto أحد الخطوط الأكثر استخدامًا على الإنترنت اليوم. تدين مونتسيرات بوجودها لطباعة القرن العشرين.

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

كيف يمكنني إضافة خطوط مخصصة إلى سمة WordPress؟

الائتمان: athemes.com

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

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

باستخدام المكون الإضافي Custom Adobe Fonts ، يمكنك بسهولة دمج هذه الخطوط في موقع WordPress الخاص بك. بمجرد تثبيت المكون الإضافي ، انتقل إلى مكتبة خطوط Adobe الواسعة للعثور على الخط الذي يناسبك (ستحتاج إلى التسجيل لاستخدامه). عندما تقرر نوع الخط ، انقر فوقه ثم انظر إلى الجزء العلوي الأيمن من الصفحة لمشاهدة "إضافة إلى مشروع الويب". باستخدام ميزة معاينة Font Pair ، يمكنك بسرعة وسهولة مشاهدة كيف تبدو مجموعات الخطوط المختلفة معًا. في العديد من المواقع الممتازة ، يمكنك شراء خطوط مخصصة أنشأها المصممون. مكتبة خطوط كبيرة وتنسيق بسيط لهذه الخطوط ، على سبيل المثال ، مضمنة في مكتبة Font Squirrel. مجموعة خطوط الويب الخاصة بـ @ Font-Face متاحة الآن للتنزيل.

يمكنك استخدام هذا البرنامج على موقع WordPress الخاص بك. ستحتاج إلى الخطوط وورقة أنماط CSS لإنشاء ورقة أنماط CSS بعد شراء المجموعة. مطلوب CSS التالي لخط OpenSans-ExtraBold-web. يجب عليك الاحتفاظ بجميع ملفات الخطوط في دليل من اختيارك للحصول على أفضل النتائج.