كيفية إضافة خطوط WordPress مخصصة (واختيار الخطوط التي تقترن)

هل تبحث عن طريقة لإضافة الخط المخصص الخاص بك في WordPress إلى موقعك؟

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

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

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

بعد ذلك ، سنوضح لك كيفية إضافة خط WordPress مخصص ، سواء كان هذا خط Google ، أو خط Adobe (المعروف سابقًا باسم خط Typekit) أو أي خط آخر.

انقر فوق هذا الارتباط للانتقال مباشرة إلى البرامج التعليمية.

اكتشف كيف تنشر في ثوان وليس ساعات

اشترك الآن للحصول على وصول حصري إلى Wordable ، جنبًا إلى جنب مع ومعرفة كيفية تحميل المحتوى وتنسيقه وتحسينه في ثوانٍ ، وليس ساعات.

ابدأ النشر

أين تجد الخطوط المخصصة لـ WordPress

المكان الأكثر شهرة للعثور على خطوط WordPress المخصصة هو بالتأكيد خطوط Google.

في Google Fonts ، ستجد مستودعًا يضم أكثر من 900 خط ، وكلها مجانية وسهلة الدمج في موقع WordPress الخاص بك بفضل CDN من Google.

خيار آخر معروف هو Adobe Fonts.

تقدم Adobe Typekit Web Fonts الآلاف من الخطوط الجميلة التي يمكن إضافتها بسرعة إلى أي من مشاريع الويب الخاصة بك.

يتم تضمينها بدون تكلفة إضافية كجزء من اشتراك Adobe Creative Cloud ، لكنها غير متاحة لغير المشتركين.

أخيرًا ، يمكنك العثور على الكثير من المواقع الأخرى التي تجمع خطوطًا متعددة مجانًا وبأسعار مميزة. اثنان من المفضلة لدينا هي:

• Font Squirrel - لتجميع الخطوط المجانية للاستخدام التجاري بنسبة 100٪.
• Fonts.com - يحتوي على مجموعة كبيرة من الخطوط المتميزة.

كيفية إقران الخطوط حتى يبدو موقعك رائعًا

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

ومع ذلك ، فأنت لا ترغب في رمي خطين معًا بشكل عشوائي - قد لا يبدو ذلك ساخنًا جدًا.

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

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

• FontPair
• فونتجوي
• النوع .io

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

كيفية إضافة خطوط WordPress مخصصة: أدلة خطوة بخطوة

الآن بالنسبة للجزء الممتع - إليك كيفية البدء في استخدام الخط المخصص الخاص بك على WordPress.

هناك بعض الطرق التي يمكنك اتباعها هنا اعتمادًا على المكان الذي تريد مصدر الخطوط منه.

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

• أضف خطوط Google في WordPress (مكون إضافي أو يدوي أو طرق استضافة محلية)
• أضف Adobe Fonts (Typekit) في WordPress
• استخدم CSS3 @ font-face لتحميل وإضافة أي خط في WordPress

كيفية إضافة خطوط جوجل إلى ووردبريس

نظرًا لأن Google Fonts هو المصدر الأكثر شيوعًا لخطوط WordPress المخصصة ، فسنغطي ثلاث طرق مختلفة لإضافة خطوط Google إلى WordPress:

• أضف Google Fonts من Google's CDN مع مكون إضافي
• أضف خطوط Google يدويًا من CDN الخاص بـ Google
• استضف خطوط Google محليًا في WordPress باستخدام مكون إضافي

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

نظرًا لشعبية Google Fonts ، يمكنك العثور على العديد من المكونات الإضافية عالية الجودة التي تجعل من السهل جدًا إضافة خطوط Google إلى WordPress ، مع تفضيلنا لخطوط Easy Google Fonts لأنها:

• حر
• وزن خفيف
• سهل الاستخدام

بمجرد تثبيت وتفعيل المكوِّن الإضافي للخط ، انتقل إلى Appearance → Customize في لوحة معلومات WordPress لبدء تشغيل مُخصص WordPress في الوقت الفعلي.

ثم ، انقر فوق خيار الطباعة لاختيار خيارات خطوط Google الخاصة بك:

من هناك ، يمكنك استخدام الخيارات لاختيار خط مخصص لكل عنصر على موقعك:

على سبيل المثال ، إليك ما يبدو عليه تغيير خط الفقرة:

بالإضافة إلى اختيار الخط نفسه ، يتيح لك المكون الإضافي أيضًا تخصيص:

• وزن الخط
• زخرفة النص
• لون الخط

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

لإعداد هذا ، انتقل إلى الإعدادات → Google Fonts وأنشئ عنصر تحكم جديد في الخط لاستهداف محددات CSS محددة:

كيفية إضافة خطوط Google في WordPress بدون البرنامج المساعد

نظرًا لأن Google تستضيف جميع خطوطها على CDN الخاص بها ، فمن السهل أيضًا إضافة خطوط Google يدويًا إلى WordPress.

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

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

للبدء ، تحتاج إلى استخدام موقع Google Fonts على الويب لاختيار الخط الذي تريد إضافته.

في هذا المثال ، لنفترض أنك تريد استخدام Roboto.

انتقل إلى صفحة الخط وانقر فوق + تحديد هذا الخط:

سيضيف هذا نافذة في الركن الأيمن السفلي. انقر لتوسيع تلك النافذة.

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

• عادي
• مائل
• عريض

يمكنك استخدام عدد أقل إذا كنت تريد أفضل أداء.

بمجرد تحديد اختياراتك ، ارجع إلى علامة التبويب Embed وانسخ رمز Embed Font:

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

• قم بتحرير ملف header.php الخاص بسمة الطفل مباشرة (تأكد من استخدام سمة فرعية - وإلا ستختفي الخطوط المخصصة عند تحديث السمة الخاصة بك)
• استخدام مكون إضافي مجاني مثل إدراج الرؤوس والتذييلات

بمجرد إضافة الرمز ، يمكنك البدء في استخدام خطوط Google في CSS الخاص بك.

إذا عدت إلى موقع Google Fonts على الويب ، فستخبرك Google بالفعل بقواعد CSS التي تحتاج إلى استخدامها:

على سبيل المثال ، لجعل علامات h2 تستخدم خط Roboto الجديد ، يمكنك الانتقال إلى Appearance → Customize → CSS الإضافي وإضافة المقتطف التالي:

h2 {

عائلة الخطوط: 'Roboto'، sans-serif؛

}

كيفية استضافة Google Fonts محليًا في WordPress باستخدام البرنامج المساعد

ها هي الطريقة النهائية لخطوط Google!

يفضل بعض الأشخاص استضافة Google Fonts محليًا ، بدلاً من تحميلها من شبكة CDN الخاصة بـ Google. بمعنى ، بدلاً من تحميلها من رابط مثل "https://fonts.googleapis.com/css؟family=Roboto:400،700" ، يمكنك استضافة الملفات على الخادم الخاص بك.

أسهل طريقة للقيام بذلك هي باستخدام مكون إضافي مجاني يسمى CAOS for Webfonts.

بمجرد تثبيت البرنامج المساعد وتنشيطه ، يمكنك الانتقال إلى الإعدادات ← تحسين خطوط الويب لاختيار الخطوط التي تريد تنزيلها على الخادم الخاص بك:

بمجرد القيام بذلك ، يمكنك البدء في استخدام الخط (الخطوط) في CSS الخاص بك (تمامًا كما لو كنت تتبع الطريقة السابقة).

كيفية إضافة Adobe Fonts (Typekit) في WordPress

إذا كنت ترغب في استخدام Adobe Fonts في WordPress ، فيمكنك بشكل أساسي اتباع نفس الخطوات مثل طريقة خطوط Google اليدوية. تذكر أن خدمة Adobe Fonts متاحة فقط كجزء من اشتراك Creative Cloud.

للبدء ، ستحتاج إلى استخدام موقع Adobe Fonts على الويب لتحديد الخط ، وإنشاء مشروع ويب (إرشادات مفصلة هنا).

في نافذة إضافة خطوط إلى Web Project ، يمكنك اختيار الخطوط التي تريد تضمينها:

بعد ذلك ، ستمنحك Adobe رمز تضمين ، تمامًا مثل خطوط Google:

خذ رمز التضمين هذا وأضفه إلى موقعك باستخدام إما ملف header.php الخاص بقالب طفلك أو مكونًا إضافيًا مثل إدراج الرؤوس والتذييلات.

بمجرد الارتباط بملف CSS ، يمكنك استخدام كود CSS الذي توفره Adobe لبدء تطبيق الخط على محددات CSS في موقعك:

كيفية استخدام @ font-face في WordPress

أخيرًا ، الطريقة الأخيرة التي سنعرضها لك هي كيفية استخدام @ font-face في WordPress. الشيء الجميل في هذه الطريقة هو أنها ستعمل حرفيًا مع أي ملف خط من أي مصدر.

بشكل أساسي ، طالما يمكنك تنزيل ملف الخط ولديك حقوق استخدامه ، فإن CSS3 @ font-face سينجزه.

للبدء ، قم بتنزيل ملف الخط من المصدر المفضل لديك. في هذا المثال ، سنستخدم خطًا مجانيًا من Font Squirrel يسمى Alex Brush.

إذا أمكن ، حاول تنزيل الملف بتنسيقات الملف .woff أو .woff2 للحصول على أفضل توافق عبر المستعرضات. إذا لم يكن ذلك ممكنًا ، فيمكنك تنزيل الخط بتنسيق مختلف ثم استخدام أداة FontSquirrel Webfont Generator المجانية لتحويله إلى .woff:

بعد ذلك ، اتصل بخادم موقع WordPress الخاص بك عبر FTP أو cPanel File Manager. ثم…

• قم بإنشاء مجلد جديد باسم الخطوط داخل النسق النشط أو دليل السمات الفرعية (قد تحتوي بعض السمات بالفعل على مجلد خطوط. إذا كان الأمر كذلك ، فيمكنك تخطي ذلك).
• قم بتحميل ملف الخط إلى مجلد الخطوط. يمكنك تحميل كل من التنسيقين .woff و. woff2

بمجرد تحميل الملفات ، انتقل إلى Appearance → Customize → CSS إضافي في لوحة معلومات WordPress الخاصة بك.

أولاً ، تحتاج إلى استخدام @ font-face لإضافة الخط الخاص بك ...

للقيام بذلك ، أدخل اسم الخط كعائلة الخطوط وأضف عنوان URL المباشر إلى ملف الخط على الخادم الخاص بك كعنوان URL. هذا ما يبدو عليه في مثال AlexBrush الخاص بنا:

@ font-face {

عائلة الخطوط: AlexBrush ؛

src: url (http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush- النظامية-webfont.woff) ؛

وزن الخط: عادي ؛

}

بمجرد القيام بذلك ، يمكنك استخدام CSS لتطبيق عائلة الخطوط الخاصة بك (بالاسم الذي قمت بتسجيله في @ font-face). على سبيل المثال ، إليك ما يبدو عليه استخدام خط AlexBrush لرؤوس <h2>:

وهذا كل شيء! يمكنك استخدام طريقة CSS3 @ font-face هذه حرفيًا لأي ملف خط.

الأفكار النهائية حول خطوط WordPress المخصصة

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

أسهل طريقة للبدء هي باستخدام الخطوط المجانية المستضافة في Google Fonts أو الخيارات المتميزة المستضافة في Adobe Fonts.

ومع ذلك ، فأنت لست مقيدًا بهذه الخدمات بأي حال من الأحوال ، وباستخدام CSS3 @ font-face ، يمكنك تحميل أي ملف خط حرفيًا إلى WordPress والبدء في استخدامه في المظهر الخاص بك.

الآن انطلق إلى هناك وقم بإنشاء اقتران الخط الخاص بك!