How to Add Custom Fonts in WordPress Website [2022]

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

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

لماذا نستخدم الخطوط المخصصة وأين تجدها؟

كما هو مذكور أعلاه ، ستجد العديد من المواقع حيث يمكنك بسهولة تنزيل الخطوط. على سبيل المثال ، يأتي Font Squirrel مع ما يصل إلى ثلاثة خطوط مجانية يمكنك استخدامها. تعد Google Fonts خيارًا رائعًا آخر حيث ستجد أكثر من 900 خط للاختيار من بينها. بخلاف ذلك ، يمكن أن تقدم لك Edge Web Fonts مجموعة كبيرة ومتنوعة من الخطوط أيضًا. للاستخدام الشخصي ، يمكنك اختيار Fonts.com أو 1001 Free Fonts .

DaFont هي أقدم مكتبة خطوط تحتوي على أكثر من 60.000 محرف يمكنك من خلالها تصفية الخطوط التي تريدها. تحتاج إلى تنزيل الخطوط المختارة ولا تشبه تكامل Google Font. نوع مماثل من مكتبة الخطوط هو UrbanFont مع مجموعة كبيرة من الخطوط الإبداعية والمربحة.

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

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

كيف تختار أفضل خط مخصص لموقع على شبكة الإنترنت؟

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

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

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

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

المصدر - https://www.w3schools.com/Css/css3_fonts.asp

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

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

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

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

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

لتحميل ملف الخطوط الخاص بك ، انتقل إلى دليل wp-content / theme / your-theme / الخطوط. يمكنك إنشاء مجلد خطوط منفصل لراحتك. قم بتحميل الملف باستخدام File Manager إلى hPanel. انتقل الآن إلى حساب WordPress الخاص بك وانقر فوق خيار المظهر . اختر محرر السمات حيث سيتم عرض ملف style.css. أضف الكود التالي في الجزء السفلي من الكود.

@ font-face {

عائلة الخطوط: Aguafina Script-Regular ؛

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

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

}

انقر الآن على زر "تحديث الملف" لحفظ التغييرات. ضع في اعتبارك أن رمز font-face يقوم بتحميل الخط في كل مرة يأتي الزائر إلى موقعك. ومع ذلك ، فإن أسلوب الكتابة لم يتم تطبيقه بعد على أي عنصر. يجب عليك تغيير نفس ملف style.css لتعيين خط لعنصر معين. الكود التالي ، على سبيل المثال ، سيجعل عنوان موقع الويب الخاص بنا يستخدم نص الخط.

.site-title {

عائلة الخطوط: Aguafina Script-Regular ، Arial، sans-serif؛

}

كيفية تعيين الخطوط المخصصة باستخدام ملحقات WordPress

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

خطوط الفسفور الابيض جوجل

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

البرنامج المساعد للخطوط

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

إنشاء موقع جذاب باستخدام الخطوط المخصصة

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

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