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

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

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

• أين تجد الخطوط المخصصة
• كيفية إضافة خطوط Google إلى موقع الويب الخاص بك باستخدام البرنامج المساعد Easy Google Fonts
• إضافة خطوط Google إلى موقع الويب الخاص بك يدويًا (لا يلزم وجود مكون إضافي)
• إضافة خطوط Adobe إلى WordPress
• كيفية إضافة أي خط مخصص إلى مساحة الويب الخاصة بك

على استعداد للبدء؟

أين يمكنك العثور على الخطوط المخصصة؟

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

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

• خطوط Google - الخيار الأكثر شيوعًا ، Google Fonts ، يقدم دليلًا مجانيًا لأكثر من 900 خط مصمم مفتوح المصدر يمكن استخدامه في أكثر من 135 لغة. يمكن تصفح هذه الخطوط بسرعة ثم دمجها بسلاسة في أي مشروع تصميم ويب.
• Adobe Fonts (المعروفة سابقًا باسم Typekit) - على الرغم من أن Typekit قدمت كلاً من الإصدارات المجانية والمتميزة من خدمتها ، والتي أعيد تسميتها الآن باسم Adobe Fonts ، ستحتاج إلى التسجيل في حزمة Adobe Creative Cloud المدفوعة للوصول إلى هذا المورد. هناك الآلاف من الخطوط للاختيار من بينها ، وجميع الخطوط مرخصة للاستخدام الشخصي والتجاري ، ويمكنك أيضًا الاختيار من حزم الخطوط التي تحمل عنوان المشروع ، والتي تعد مثالية لأولئك الذين يفتقرون إلى عين للتصميم.
• Font Squirrel - في مكتبة Font Squirrel ، ستجد مزيجًا من الخطوط المجانية والمتميزة ، والتي يمكن شراؤها كمشتريات لمرة واحدة. مرة أخرى ، يمكنك الاختيار من بين آلاف الخطوط عالية الجودة ، ومعظمها مجاني ومرخص تجاريًا.
• Fonts.com - يوفر أكثر من 150.000 منتج من خطوط سطح المكتب والويب ، ويحتوي موقع Fonts.com على مجموعة رائعة من الخطوط المخصصة المتميزة. سوف تجد أيضًا مجموعة متنوعة من المقالات الشيقة على مدونة Font.com ، والتي تشارك نصائح وتقنيات الطباعة.
• FontPair - يقدم تجربة مختلفة قليلاً عن الموارد الأخرى ، يجمع FontPair بين الخطوط من Google Fonts ، مما يساعدك في العثور على مجموعات الخطوط المناسبة لموقعك على الويب.

لذا ، أنت تعرف الآن مكان العثور على الخطوط المخصصة. دعنا نلقي نظرة بعد ذلك على كيفية إضافة Google Fonts إلى موقع WordPress الخاص بك.

كيفية إضافة خطوط Google إلى WordPress باستخدام Plugin Easy Google Fonts

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

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

لنكتشف الآن كيفية تثبيت هذا المكون الإضافي واستخدامه.

الخطوة الأولى: تثبيت Easy Google Fonts

لبدء استخدام Easy Google Fonts ، افتح لوحة معلومات WordPress وحدد الإضافات> إضافة جديد من القائمة.

ثم اكتب Easy Google Fonts في وظيفة البحث ، وبمجرد استرداد المكون الإضافي ، انقر فوق تثبيت> تنشيط .

ستجد الآن Easy Google Fonts ضمن الإعدادات في قائمة WordPress الخاصة بك.

الخطوة الثانية: تحرير الخطوط في مُخصص WordPress

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

انقر فوق الطباعة. يمكنك بعد ذلك تحديد مناطق مختلفة من موقع الويب الخاص بك حيث ترغب في تطبيق خط Google مخصص (مثل الفقرة ، والعنوان 2 ، والرأس 3 ، وما إلى ذلك).

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

لا يمكنك فقط تغيير نوع الخط ، ولكن يمكنك أيضًا تغيير اللون والحجم والموضع وغير ذلك الكثير. بمجرد أن تصبح راضيًا عن الخط الجديد ، انقر فوق نشر .

الخطوة 3: إنشاء عناصر تحكم خط مخصصة

تتيح لك عناصر التحكم الافتراضية في Easy Google Fonts تغيير خطوط أقسام الفقرات والرؤوس من 1 إلى 6. ومع ذلك ، لا يمكن التحكم في جميع عناصر المظهر الخاص بك بواسطة عناصر التحكم الافتراضية في الخط.

إذا كنت تريد تغيير عنصر مختلف في نسختك (بخلاف فقرة أو رأس) ، فستحتاج إلى إنشاء عناصر تحكم الخط المخصصة الخاصة بك. على الرغم من أن Easy Font Control يمكّنك من القيام بذلك بسهولة ، إلا أنك ستظل بحاجة إلى فهم أساسي لمحددات CSS.

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

ضمن Add CSS Selectors ، أضف محدد CSS للعنصر الذي ترغب في إدارته. يمكنك إضافة أكثر من عنصر إذا كنت ترغب في ذلك. ثم حدد حفظ التحكم في الخط .

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

يمكنك الآن تحديد خط مخصص جديد للعنصر المخصص المحدد وتغيير أي إعدادات أخرى للمظهر والموضع .

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

كيفية إضافة خطوط Google يدويًا إلى WordPress (لا يلزم وجود مكون إضافي)

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

الخطوة 1: حدد أحد خطوط Google

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

ثم في صفحة الخط ، انقر فوق تحديد هذا الخط . هنا اخترنا الخط Indie Flower.

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

الخطوة 2: قم بتضمين كود Custom Font في موقع WordPress الخاص بك

بعد ذلك ، ستحتاج إلى نسخ كود التضمين (انظر النافذة المنبثقة أعلاه) ولصقه في قسم <head> في قالب WordPress الخاص بك. أسهل طريقة للقيام بذلك هي تثبيت مكون WordPress الإضافي المجاني Insert Headers and Footers. باستخدام هذا المكون الإضافي ، يمكنك إضافة رمز بسرعة إلى موقع الويب الخاص بك دون الحاجة إلى تعديل ملفات السمات الخاصة بك.

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

وبالمثل ، إذا كنت تفضل ذلك ، يمكنك تعديل ملف header.php الخاص بالقالب الفرعي الخاص بك.

الخطوة 3: تطبيق الخط الجديد باستخدام CSS

بمجرد إضافة رمز HTML للخط المخصص إلى موقع الويب الخاص بك ، يمكنك الآن استخدام CSS لتطبيق الخط المخصص الجديد الخاص بك. في نافذة Google Fonts المنبثقة ، ستجد قواعد CSS الخاصة بخطك الجديد.

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

سيعرض لك Customizer تعديلات الخط في الوقت الفعلي ، وإذا كنت راضيًا عن النتائج ، فانقر فوق نشر .

كيفية إضافة خطوط Adobe إلى WordPress

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

الخطوة 1: اختر Adobe Font

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

سيُطلب منك الآن تسمية مشروع الويب الخاص بك ، وكذلك استخدام مربعات الاختيار لتحديد أوزان الخطوط والأنماط التي تريد تضمينها. ثم حدد إنشاء مشروع .

الخطوة 2: قم بتضمين كود Adobe Font في موقع WordPress الخاص بك

الخطوة التالية هي تضمين الكود الذي توفره Adobe للخط الذي اخترته في موقع WordPress الخاص بك.

يتبع هذا بالضبط نفس العملية مثل تضمين رمز خطوط Google. ببساطة قم بتضمين الكود في علامة <head> على موقع الويب الخاص بك أو استخدم المكون الإضافي WordPress Insert Headers and Footers (كما تمت مناقشته سابقًا).

الخطوة 3: تطبيق الخط الجديد باستخدام CSS

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

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

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

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

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

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

الخطوة 1: تنزيل Custom Font

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

هنا قمنا بتنزيل الخط المخصص المجاني Milkshake من Squirrel Fonts.

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

إذا كنت بحاجة إلى تحويل خطك المخصص إلى تنسيق مختلف ، فإن Squirrel Font يوفر أداة Webfont Generator مجانية والتي ستمكنك من القيام بذلك.

الخطوة 2: قم بتحميل الخط المخصص إلى الخادم الخاص بك

الخطوة التالية هي تحميل الخط المخصص على الخادم الخاص بك. للقيام بذلك ، افتح File Manager في cPanel الخاص بموقعك.

ثم داخل مجلد السمات النشطة ، قم بإنشاء مجلد جديد باسم الخطوط وقم بتحميل الخط المخصص هنا.

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

الخطوة 3: استخدم CSS لتطبيق الخط المخصص على موقع الويب الخاص بك

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

 @ font-face {
    عائلة الخط: ميلك شيك ؛
    src: url ("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         تنسيق ("woff") ؛
}

الأهم من ذلك ، تأكد من تغيير اسم الخط وعنوان URL (انسخ عنوان URL لملف الخط على الخادم الخاص بك).

يمكنك بعد ذلك المضي قدمًا واستخدام قواعد CSS لتحديث الخطوط على موقعك. فيما يلي مثال على كيفية تطبيق الخط المخصص على رأس 3 وأقسام الفقرة:

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

أفكار أخيرة حول كيفية إضافة خطوط مخصصة إلى WordPress

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

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