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

نشرت: 2020-11-05

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

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

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

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

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

جدول المحتويات

  • كيفية إضافة خطوط مخصصة إلى ووردبريس
    • 1. إضافة خطوط جوجل باستخدام البرنامج المساعد
    • 2. إضافة خطوط جوجل باستخدام التعليمات البرمجية
    • 3. أضف Adobe TypeKit Fonts إلى WordPress
  • بعض مكتبات الخطوط المخصصة الأخرى
  • كيفية إضافة خطوط مخصصة أخرى باستخدام البرنامج المساعد
  • كيفية إضافة خطوط مخصصة أخرى يدويًا
  • استنتاج

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

1. إضافة خطوط جوجل باستخدام البرنامج المساعد

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

  1. لهذه الطريقة ، قم بتثبيت المكوّن الإضافي Easy Google Fonts أولاً. بمجرد إعداد المكون الإضافي ، ستجد خيارًا جديدًا يسمى "الطباعة" في مُخصص WordPress الخاص بك (المظهر> التخصيص).
الطباعة

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

تحرير الخط

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

ضمن علامة التبويب المظهر ، يمكنك العثور على خيارات شائعة أخرى ، مثل لون الخط وحجم الخط وارتفاع الخط.

توجد بعض عناصر التحكم المرئية المتعمقة ضمن علامة التبويب الموضع ، مثل الهامش والحشو والحدود.

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

خطوط جوجل

4. انتقل إلى علامة التبويب "إدارة عناصر التحكم في الخط" ، وانقر فوق "إنشاء عنصر تحكم في الخط".

قم بإنشاء عنصر تحكم خط جديد

5. سيُطلب منك تقديم محددات CSS لتحديد هذه الفئة المعينة. ثم انقر فوق "التحكم الآمن في الخط" لإنشاء فئة / تحكم جديد في الخط.

محددات CSS

6. يمكن العثور على عناصر التحكم في الخط المخصص في موقع مختلف عن تلك الافتراضية. ارجع إلى أداة تخصيص WordPress وانقر على خيار الطباعة. ستجد أن هناك فئتين - الطباعة الافتراضية وطباعة الموضوع. يمكن العثور على عناصر التحكم في الخطوط المخصصة ضمن خيار طباعة السمة.

طباعة الموضوع

2. إضافة خطوط جوجل باستخدام التعليمات البرمجية

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

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

عائلة مختارة

3. انسخ رابط التضمين هذا والصقه في ملف header.php ، قبل علامة <body> مباشرةً.

4. إذا كنت لا ترغب في التعامل مع متاعب العمل مع ملفات السمات ، فهناك مكون إضافي مفيد يسمى Insert Headers and Footers الذي يضيف رمزًا بسهولة إلى ملفات السمات الخاصة بك. يمكنك استخدام هذا المكون الإضافي من خلال القسم الخاص به في شريط الإعدادات بعنوان "إدراج الرؤوس والتذييلات". ما عليك سوى لصق الشفرة في مربع "البرامج النصية في الرأس".

أدخل الرؤوس والتذييلات

3. أضف Adobe TypeKit Fonts إلى WordPress

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

  1. بمجرد تسجيل الدخول إلى موقع الويب ، يمكنك استخدام الخطوط التي تريدها بالنقر فوق الزر </>.
خطوط Adobe

2. للحصول على رابط التضمين ، تحتاج إلى إنشاء مشروع ويب على Adobe Fonts وإضافة الخط المختار إلى المشروع.

اختيار الخط للمشروع
كود التضمين

3. مثل عملية Google Fonts ، يجب عليك لصق رابط التضمين هذا في ملف header.php الخاص بالسمة قبل علامة <body>.

4. يمكنك تجنب العمل مباشرة مع ملفات السمات باستخدام المكون الإضافي "إدراج رؤوس وتذييلات". ما عليك سوى الانتقال إلى خيار إدراج الرؤوس والتذييلات في شريط الإعدادات ولصق رمز التضمين في مربع "البرامج النصية في الرأس". سيؤدي هذا إلى استيراد خطوط TypeKit التي اخترتها.

أدخل الرؤوس والتذييلات

بعض مكتبات الخطوط المخصصة الأخرى

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

  1. قالب الوحش
  2. السنجاب الخط
  3. خطوط الربيع
  4. 1001 لخطوط مجانية
  5. مهووس بالخطوط
  6. خطوط مجردة
  7. MyFonts

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

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

كيفية إضافة خطوط مخصصة أخرى يدويًا

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

قم بتنزيل الخط الذي تريده من أي مكتبة خطوط مثل TemplateMonster. بعد ذلك ، انتقل إلى wp-content / theme / your-theme / الخطوط وقم بتحميله إلى مجلد Fonts باستخدام عميل FTP. إذا لم يكن هناك مجلد الخطوط ، فقم بإنشاء واحد.

بمجرد تحميل ملف الخط ، ستحتاج إلى استيراد الخط باستخدام ورقة الأنماط الخاصة بك. أضف الكود التالي إلى ملف style.css الخاص بك:

@ font-face {

عائلة الخطوط: خط مخصص ؛

src: url (http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf) ؛

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

}

تحتاج إلى استبدال عائلة الخطوط باسم الخط الذي ترغب في استيراده وعنوان URL بعنوان URL لموقع الويب الخاص بك.

استنتاج

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