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

تخلق الطباعة وعناصر الربط الأخرى انطباعًا أوليًا جيدًا وتضبط الحالة المزاجية لزوار موقعك وتؤسس هوية علامتك التجارية. وجدت الدراسات^(Studies) أيضًا أن الخطوط تؤثر على قدرة القراء على التعلم واستدعاء المعلومات وحفظ النصوص.

إذا قمت للتو بتثبيت سمة WordPress^{(installed a WordPress theme)} أو لديك بعض تجربة CSS والتشفير ، فسنعرض لك العديد من الخيارات التي يمكنك استخدامها لتغيير الخطوط في WordPress .

كيفية تغيير الخطوط في ووردبريس^{(How to Change Fonts in WordPress)}

هناك ثلاثة خيارات رئيسية متاحة لك لتغيير الخطوط في WordPress:

• استخدم خطوط الويب مثل Google Fonts أو Fonts.com أو Adobe Edge Web Fonts ، والتي تتم استضافتها على موقع جهة خارجية
• كود^(Code) خطوط الويب في القالب الخاص بك وإدراجها في قائمة
• استضف^(Host) الخطوط على موقعك وأضفها إلى نسختك

1. كيفية تغيير الخطوط في ووردبريس باستخدام خطوط الويب^{(1. How to Change Fonts in WordPress Using Web Fonts)}

يعد استخدام خطوط الويب طريقة أسهل وأسرع لتغيير الخطوط في WordPress من تنزيل ملفات الخطوط وتحميلها.

باستخدام هذا الخيار ، يمكنك الوصول إلى مجموعة متنوعة من الخطوط^{(access a variety of fonts)} دون تحديثها في كل مرة يحدث فيها تغيير ، ولا يستهلك مساحة الخادم على الاستضافة الخاصة بك. يتم تقديم الخطوط مباشرة من خوادم الموفر باستخدام مكون إضافي أو عن طريق إضافة رمز إلى موقعك.

تأكد^(Make) من أن خطوط الويب التي تختارها لموقعك تتطابق مع هوية علامتك التجارية ، ويسهل قراءتها للنص الأساسي ، ومألوفة لزوار الموقع ، وتنقل نوع الحالة المزاجية والصورة التي تريدها.

يمكنك إضافة خطوط الويب باستخدام مكون WordPress الإضافي^{(using a WordPress plugin)} أو يدويًا عن طريق إضافة بضعة أسطر من التعليمات البرمجية إلى موقعك. دعنا نستكشف كلا الخيارين.

كيفية إضافة خطوط الويب باستخدام البرنامج المساعد WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

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

1. للبدء ، قم بتسجيل الدخول إلى لوحة تحكم مسؤول WordPress الخاصة بك ، وحدد Plugins > Add New .

1. اكتب طباعة خطوط Google^{(Google Fonts Typography)} في مربع البحث ، وحدد التثبيت الآن^{(Install Now)} .

1. حدد تنشيط^(Activate) .

1. بعد ذلك ، قم بالوصول إلى Customizer بالانتقال إلى Appearance > Customize .

1. حدد قسم خطوط Google^{(Google Fonts)} .

1. بعد ذلك ، انقر فوق الارتباط لفتح إعدادات الخطوط وتكوينها على النحو التالي:

• ضمن الإعدادات الأساسية^{(Basic Settings)} ، قم بتعيين الخط الافتراضي للنص الأساسي والعناوين والأزرار.

• ضمن الإعدادات المتقدمة^{(Advanced Settings)} ، قم بتكوين عنوان الموقع والوصف والقائمة والعناوين والمحتوى والشريط الجانبي والتذييل.

• قم بإلغاء تحديد^(Uncheck) أي أوزان خطوط غير مرغوب فيها في قسم تحميل الخط ^{(Font Loading)}لتجنب إبطاء موقعك^{(avoid slowing down your site)} .

إذا كانت هناك خطوط على موقعك لا تُعرض أو لا تعمل بشكل صحيح ، فاستخدم قسم تصحيح^{(Debugging )} الأخطاء لتحري الخلل وإصلاحه.

1. يمكنك اختبار هذه الإعدادات في "أداة التخصيص^(Customizer) " للتأكد من أنها تعمل بالطريقة التي تريدها ، ثم حدد " نشر^(Publish) " .

ملاحظة^(Note) : إذا نسيت تحديد النشر في أداة التخصيص^(Customizer) ، فستفقد جميع التغييرات التي أجريتها.

كيفية إضافة خطوط الويب باستخدام التعليمات البرمجية^{(How to Add Web Fonts Using Code)}

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

ومع ذلك ، هناك خطوات مختلفة يجب اتخاذها إذا كنت تستخدم سمة من دليل سمة WordPress أو سمة مخصصة.

إذا اشتريت سمة من دليل سمة WordPress ، فأنشئ سمة^{(create a child theme)} فرعية ثم أعطها ملف style.css و function.php. يكون الأمر أسهل إذا كان لديك سمة مخصصة حيث يمكنك تعديل ورقة الأنماط وملف الوظائف من السمة الخاصة بك.

1. للبدء ، حدد خطًا من مكتبة Google Fonts ، وحدد رمز + (plus) لإضافته إلى مكتبتك.

1. بعد ذلك ، حدد علامة التبويب في الجزء السفلي حيث ستجد الرمز لإضافته إلى موقعك. انتقل إلى قسم Embed Font ضمن علامة التبويب Embed . ستجد الرمز الذي تم إنشاؤه بواسطة Google Fonts ، والذي يبدو كالتالي:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

ملاحظة^(Note) : اخترنا Work Sans لهذا الدليل ، لذا قد يختلف اسم الخط بناءً على ما اخترته.

1. انسخ هذا الجزء من الكود: https://fonts.googleapis.com/css2?family=Work+Sans

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

1. لإدراج الخط في قائمة الانتظار ، افتح ملف الوظائف وأضف الكود التالي. ( استبدل^(Replace) الرابط بالرابط الذي تحصل عليه من Google Fonts ):

الوظيفة wosib_add_google_fonts () { ^{(function wosib_add_google_fonts() {)}
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style ('googleFonts') ،
}

add_action ('wp_enqueue_scripts'، 'mybh_add_google_fonts') ؛

1. يمكنك إضافة سطر جديد إلى وظيفتك أو إلى نفس السطر إذا كنت ترغب في إضافة المزيد من الخطوط في المستقبل على النحو التالي:

function mybh_add_google_fonts () {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style ('googleFonts') ،
}

add_action ('wp_enqueue_scripts'، 'mybh_add_google_fonts') ؛

في هذه الحالة ، قمنا بوضع خطوط Cambria و Work Sans في قائمة الانتظار .

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

1. للقيام بذلك ، افتح ملف style.css الخاص بالسمة وأضف الكود لتصميم العناصر الفردية باستخدام خطوط الويب كما يلي:

body {
font-family: 'Work Sans'، sans-serif؛
}

h1، h2، h3 {
font-family: 'Cambria'، serif؛
}

في هذه الحالة ، سيكون الخط الرئيسي هو Work Sans بينما ستستخدم عناصر الرأس مثل h1 و h2 و h3 Cambria .

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

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

body {
font-family: 'Work Sans'، Arial، sans-serif؛
}

h1، h2، h3 {
font-family: 'Cambria'، Times New Roman، serif؛
}

إذا كان كل شيء على ما يرام ، فسيرى زوار موقعك خطوط الويب الافتراضية الخاصة بك ، في حالتنا Work Sans و Cambria . إذا كانت هناك مشكلات ، فسترى الخطوط الاحتياطية ، على سبيل المثال Arial أو Times New Roman في حالتنا.

2. كيفية تغيير الخطوط في WordPress عن طريق استضافة الخطوط^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

تساعدك استضافة الخطوط على الخوادم الخاصة بك على تحسين أداء خطوط الويب الخاصة بك ، ولكنها أيضًا طريقة أكثر أمانًا^{(a more secure way)} للقيام بذلك بدلاً من سحب الموارد من مواقع الجهات الخارجية.

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

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

1. بعد ذلك ، انتقل إلى wp-content/themes/themename لتحميل ملف الخط إلى السمة الخاصة بك. 
2. افتح ورقة الأنماط وأضف الكود التالي (في هذه الحالة ، نستخدم خط Work Sans ولكن يمكنك استبداله بخطوطك الخاصة):

@font-face {
font-family: 'Work Sans'؛
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
وزن الخط: عادي ؛ ^{( font-weight: normal;)}
نمط الخط: عادي ؛ ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans'؛
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
وزن الخط: غامق ؛ ^{( font-weight: bold;)}
نمط الخط: عادي ؛ ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria'؛
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
وزن الخط: عادي ؛ ^{( font-weight: normal;)}
نمط الخط: عادي ؛ ^{( font-style: normal;)}
}

ملاحظة^(Note) : يسمح لك استخدامfontface باستخدام الخط الغامق والمائل والأشكال الأخرى للخط ، وبعد ذلك يمكنك تحديد الوزن أو النمط لكل خط.

1. بعد ذلك ، أضف نمطًا لعناصرك على النحو التالي:

body {
font-family: 'Work Sans'، Arial، sans-serif؛
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1، h2، h3 {
font-family: 'Cambria'، Times New Roman، serif؛
}

تخصيص الطباعة WordPress الخاص بك^{(Customize Your WordPress Typography)}

يعد تغيير الخطوط في WordPress فكرة رائعة لتحسين العلامة التجارية وتجربة المستخدم. إنها ليست مهمة مباشرة ، ولكن سيكون لديك المزيد من التحكم في المظهر الخاص بك.

هل^(Were) تمكنت من تخصيص خطوط موقعك باستخدام الخطوات باستخدام النصائح الواردة في هذا الدليل؟ قل^(Tell) لنا في التعليقات.

How to Change Fonts in WordPress

A grеat way to add some branding and individualism to your WordPress site is to change the fonts in your thеme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• كيفية نقل WordPress site من مجموعة واحدة إلى أخرى

• كيفية تثبيت و Setup WordPress على Microsoft Azure

• كيفية تشغيل سريع سريع WordPress على Microsoft Azure

• كيفية تكوين Privacy في WordPress ولماذا من المهم

• كيفية تثبيت WordPress على Google Cloud Platform

• كيفية تكرار صفحة في ووردبريس

• WordPress Jetpack: ما هو وهل يستحق التثبيت؟

• البرامج WordPress HTTP Error عند تحميل الصور

• كيفية تسريع موقع WordPress في 11 خطوة

• كيفية إزالة البرامج الضارة من موقع WordPress الخاص بك

• ما هو AMP لـ WordPress وكيفية تثبيته

• كيفية تتبع Broken Links مع Google Webmaster Tool

• Must Have WordPress Yoast SEO Settings 2021

• كيفية استخدام Lumen5 لتحويل منشور المدونة الخاص بك إلى فيديو

• كيفية إزالة جميع آثار البرنامج المساعد WordPress

• كيفية تثبيت موقع اختبار WordPress على جهاز الكمبيوتر الخاص بك

• كيفية جعل WordPress Site Secure

• Wix Vs WordPress: أيهما أفضل لإنشاء موقع الويب الخاص بك؟

• مراجعة الكتاب: قم ببناء موقع الويب الخاص بك: دليل فكاهي إلى HTML و CSS و Wordpress

• إظهار مقتطفات على الصفحة الرئيسية من WordPress blog