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

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

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

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

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

أين تجد الخطوط لموقع الويب الخاص بك

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

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

• خطوط Google: تصفح أكثر من 600 خط مفتوح المصدر تم تحسينها للويب. يعد استخدام هذه الخطوط على موقع WordPress الخاص بك أمرًا سهلاً للغاية ، حيث سنقوم بتغطيته قريبًا.
• Font Squirrel: مستودع كبير آخر للخطوط المجانية.
• Edge Web Fonts: مجموعة من خطوط الويب المجانية التي يتم تشغيلها بواسطة Adobe Typekit.
• Typekit: مجموعة احترافية من أكثر من 4000 خط مجاني ومتميز من Adobe ، للاستخدام على الويب وفي الطباعة.

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

أدوات الطباعة لمصممي الويب

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

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

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

أحد الموارد عبر الإنترنت التي يجب عليك بالتأكيد إلقاء نظرة سريعة عليها عند تخصيص الخطوط على موقع الويب الخاص بك ، هو Golden Ratio Typography Calculator. تتيح لك أداة الطباعة هذه ، من الشخص الموجود خلف Thesis Framework ، إدخال حجم الخط ، متبوعًا بعرض منطقة المحتوى الخاصة بك. ستقوم الأداة بعد ذلك بحساب الإعدادات المطبعية المثالية لتكوين موقع الويب الخاص بك.

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

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

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

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

خطوط جوجل سهلة

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

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

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

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

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

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

استخدم أي خط

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

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

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

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

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

خطوط Typekit لـ WordPress

إذا كنت ترغب في استخدام الخطوط المجانية والمتميزة من خدمة Adobe Typekit على موقع WordPress الخاص بك ، فإن البرنامج الإضافي Typekit Fonts for WordPress الإضافي يناسبك.

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

إضافة خطوط مخصصة إلى WordPress يدويًا

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

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

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

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

بمجرد أن يكون ملف الخط على الخادم الخاص بك ، افتح ملف أنماط CSS الخاص بالسمات للتحرير. يمكن القيام بذلك من داخل لوحة تحكم مسؤول WordPress الخاصة بك ، في المظهر> شاشة المحرر.

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

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

خاتمة

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

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

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

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