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

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

هيا بنا نذهب!

لماذا استخدام الخطوط المخصصة

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

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

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

دعنا نبدأ ونلقي نظرة على الخيارات المتاحة لنا لإضافة خطوط مخصصة إلى موقع WordPress الخاص بنا.

أضف خطوط Google باستخدام البرنامج المساعد لخطوط Google

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

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

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

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

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

أضف خطوط Google يدويًا

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

الخطوةالاولى:

أولاً ، يجب عليك الحصول على رابط الخط الخاص بك من موقع خطوط Google.

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

لإدراج خطوط Google في قائمة الانتظار بشكل صحيح في WordPress ، افتح ملف functions.php الخاص بالقالب باستخدام المحرر المفضل لديك وأدخل الكود التالي في النهاية:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

انسخ عنوان URL المقدم في نص رابط Google (يبدأ بـ https: //) ثم استبدل هذا في الكود أعلاه (في مثالنا هذا هو https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

ثم في ملف style.css الخاص بالثيم الخاص بك ، استخدم الخط بنفس الطريقة التي تستخدمها مع أي خط آخر ، باتباع "قواعد CSS لتحديد العائلات" المقدمة من Google.

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

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

أضف خطوط Adobe

تعد الخطوط من Adobe Fonts بديلاً رائعًا لخطوط Google. يساعدك المكون الإضافي Custom Adobe Fonts على تضمين هذه الخطوط بسهولة في موقع WordPress الخاص بك ويعمل حاليًا مع Astra Theme و Beaver Builder Theme و Beaver Builder Plugin و Elementor Page Builder.

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

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

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

استخدام البرنامج المساعد لخطوط Adobe المخصصة

هذه هي أسهل طريقة لسحب خطوط Adobe الخاصة بك إلى موقع الويب الخاص بك. بمجرد إنشاء مشروعك ، انقر فوق "مشروعات الويب" وابحث عن مشروعك في القائمة. سترى في الجزء العلوي أن هناك رمز "معرف المشروع" (كما هو موضح أدناه). الآن ، توجه إلى إعدادات البرنامج المساعد Adobe Font وانقر على "Custom Typekit Fonts" من القائمة. أدخل معرّف المشروع هذا في هذا المربع واحفظه.

سترى الآن هذا الخط مدرجًا إما في WordPress Customizer أو Elementor أو منشئ الصفحات المتوافق الآخر الذي تستخدمه. حدد وأنت على ما يرام.

تضمين الخطوط المخصصة يدويًا

يتم تضمين خطوط Adobe يدويًا بنفس الطريقة تمامًا كما وصفناها لدمج خطوط Google. سترى رابط تضمين ورقة أنماط مقدمًا من Adobe (كما هو موضح أدناه) في نظرة عامة على مشروع الويب. لعرض فئات CSS ، انقر فوق نص "تعديل المشروع" وسيتم توفير هذه العناصر بجانب كل نمط من الخطوط.

كيفية البحث عن الخطوط المخصصة وإقرانها

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

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

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

تحميل خطوط مخصصة من المجلدات

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

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

أحد الخطوط الرائعة التي قد ترغب في التفكير فيها من Font Squirrel هو Fira Sans. دعنا نستخدم هذا كمثال لمعرفة كيفية تثبيته على موقع WordPress الخاص بنا لاستخدامه.

أولاً ، انقر فوق علامة التبويب Webfont Kit. حدد مربع WOFF ثم انقر فوق "تنزيل @ Font-Face kit".

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

بالنسبة إلى OpenSans-ExtraBold-webfont على سبيل المثال ، يتعين علينا استخدام CSS التالية:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

أفضل رهان لك هو وضع جميع ملفات الخطوط بجميع التنسيقات داخل دليل مناسب من اختيارك ضمن مجلد السمة الخاص بك. في مثالنا ، يوجد ضمن المجلد /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

داخل نفس المجلد ، قم بإنشاء ملف open-sans.css وضعه داخل كل كود CSS لكل ملف stylesheet.css بحيث تبدو محتوياته كما يلي:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

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

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

لا تنس استبدال عنوان URL بالمسار إلى ملف open-sans.css الخاص بك.

استنتاج

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