كيفية إضافة خط غير متصل إلى موقع WordPress الخاص بك

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

ظل هذا المقال جالسًا على مكتبي لبعض الوقت ، وأردت مشاركته معك. يتم تحميل خطوط Google بالكامل محليًا. لقد كنت أستخدم خطوط Google Oswald و Lato من Crunchify.com حتى الآن. ما عليك سوى فتح عنوان URL في الصورة أعلاه التي تظهر في علامة التبويب الجديدة وستلاحظ أنها أنتجت 14 خطًا جديدًا . سيساعدك هذا البرنامج التعليمي أيضًا إذا كان لديك أي من الأسئلة التالية. بمجرد استخراج ملف Lato.zip ، ستتمكن من رؤية جميع خطوط Lato العشرة بامتداد .ttf. في معظم مواقع الويب ، تحتاج فقط إلى خطوط عادية وجريئة ومائلة.

في الخطوة 2 ، يجب عليك الآن تحويل الخطوط إلى التنسيقات woff2 و eot و svg و ttf و wof. يمكن تحميل ملف على الموقع https://Font-Converter.net/en الذي سيحول الخط إلى هذه التنسيقات. لا يوجد شيء يستحق التحدث به. يمكنك الآن تحميل الخطوط من نظام الملفات المحلي الخاص بك.

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

هناك عدة طرق مختلفة يمكنك من خلالها إضافة خطوط مخصصة إلى قالب WordPress الخاص بك. إحدى الطرق هي استخدام مكتبة Google Fonts. يمكنك العثور على قائمة شاملة لجميع الخطوط المتاحة على موقع Google Fonts. بمجرد العثور على الخط الذي يعجبك ، يمكنك إضافة الكود إلى ورقة أنماط المظهر الخاص بك (style.css). على سبيل المثال ، إذا أردت استخدام خط Open Sans ، يمكنك إضافة الكود التالي إلى ورقة الأنماط الخاصة بك: body {font-family: 'Open Sans'، sans-serif؛ } هناك طريقة أخرى لإضافة خطوط مخصصة إلى سمة WordPress الخاصة بك وهي استخدام مكون إضافي مثل Easy Google Fonts . يجعل هذا المكون الإضافي من السهل إضافة خطوط مخصصة إلى قالبك دون الحاجة إلى تعديل أي رمز.

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

قم بتثبيت المكون الإضافي Custom Adobe Fonts لتسهيل دمج هذه الخطوط في موقع WordPress الخاص بك. قم بتثبيت المكون الإضافي ، ثم انتقل إلى مكتبة خطوط Adobe الواسعة للعثور على خط يناسبك (يجب عليك التسجيل لاستخدامه). بعد اختيار الخط ، انقر فوقه ثم ابحث في الزاوية اليمنى العليا من الصفحة عن "إضافة إلى مشروع الويب". باستخدام Font Pair ، يمكنك رؤية شكل مجموعات الخطوط لديك ، ويمكنك مزج الخطوط ومطابقتها بناءً على ما تراه. هناك العديد من المواقع الممتازة التي تبيع خطوطًا مخصصة تم إنشاؤها بواسطة المصمم نفسه. تم تضمين مكتبة خطوط كبيرة مع الخط Squirrel ، وهو أيضًا سهل التنفيذ. يمكنك استخدام مجموعة خطوط الويب الخاصة بـ @ Font-Face.

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

كيفية تحميل خطوط جوجل في ووردبريس

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

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

تتضمن معظم سمات WordPress تكامل خطوط Google كجزء من إعداداتها الافتراضية. تسمح لك المكونات الإضافية التي تشكل منصة OMGF بتصفح أكثر من 600 خط على موقع الويب الخاص بك. في القائمة المنسدلة "Font Family" ، يمكنك الاختيار من بين أكثر من 100 نوع مختلف لأقسام مختلفة من موقعك. هناك عدة خيارات لإضافة عناصر تحكم خط مخصصة ، كما هو موضح في معاينة أداة التخصيص.

هل يجب أن أقوم بتحميل خطوط Google محليًا ووردبريس؟

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

Wp-content / theme / your-theme / الخطوط

مجلد wp-content / theme / your-theme / الخطوط هو المكان الذي يمكنك فيه تخزين أي خطوط مخصصة تريد استخدامها مع قالبك. يمكن إضافة الخطوط إلى هذا المجلد عبر FTP أو باستخدام البرنامج المساعد لمدير الملفات. بمجرد إضافة الخطوط إلى هذا المجلد ، يمكن استخدامها في CSS الخاص بالقالب الخاص بك عن طريق الرجوع إلى اسم الخط.

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

أضف الخطوط إلى WordPress بدون البرنامج المساعد

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

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