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

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

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

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

تغيير الخط لكل لغة

اذا كنت ترغب في استعمال خط واحد لكل لغة ، اي بمعنى انه لديك خط واحد يشمل جميع الاوزان ، مثال في الصورة ادناه :

خط

مثال آخر :

لديك 3 خطوط ، كل خط خاص بكل لغة مختلفة ، و كل خط يحتوي على جميع الاوزان .

في هذه الحالة قم بنسخ الكود ادناه وقم بوضعه في تخصيص > اضافة CSS :



html[lang="ar"] body, button, input, select, textarea { 
font-family: 'اسم الخط';
}
html[lang="ar"] p , a ,{ 
font-family: 'اسم الخط';
} 
html[lang="ar"] h1, h2, h3, h4, h5, site-title, h6 ,b, strong {
font-family: 'اسم الخط';
}

/*الوصف*/

html[lang="ar"] /*تعني انك تريد عرض الكود في اللغة العربية*/

الكود اعلاه يشير انك تريد تغيير نوع الخط في اللغة العربية ، بمعنى آخر انك تريد تغيير CSS في اللغة العربية .

يمكنك تغيير الخط في لغة اخرى مثال :

html[lang="fr"] body, button, input, select, textarea { 
font-family: 'اسم الخط';
}
html[lang="fr"] p , a ,{ 
font-family: 'اسم الخط';
} 
html[lang="fr"] h1, h2, h3, h4, h5, site-title, h6 ,b, strong {
font-family: 'اسم الخط';
}
 
/*الوصف*/
 
html[lang="fr"] /*تعني انك تريد عرض الكود في اللغة الفرنسية*/

الامثلة اعلاه تعطيك فكرة على انه كلما تريد تغيير الخط في لغة مختلفة غير فقط الكود التالي : html[lang=”ar”] ، امثلة :

html[lang="en"] الإنجليزية
html[lang="fr"] الفرنسية
html[lang="ar"] آلعربية

استنتاج :

نستنتج انه كلما نريد تغيير الخط في لغة معينة نقوم بتغيير slug الخاص بالغة ، للمعرفة slug الخاص بالغة التي تستعملها اضغط هنا .

slug wp
عند الدخول الى الرابط ستجد slug بهذا الشكل

ملاخطة
اذا اردت تغيير الخط في اللغة الإفتراضية قم بحذف هذا الكود :html[lang=”xx “]

اضافة 3 خطوط مختلفة (او اكثر) لكل لغة

اذا كنت ترغب في استعمال اكثر من خط مختلف في كل لغة ، بمعنى انه في الفقرات تستخدم خط معين و في العناوين تستخدم خط مختلف آخر الخ …

تستعمل نفس الطريقة الاولى لكن سنغير فقط css class لكل خط ، مثال :

/*تغيير خط الفقرات*/
html[lang="ar"] p { 
font-family: 'اسم الخط 1'; /**/
} 

/*تغيير خط العناوين*/
html[lang="ar"] h1, h2, h3, h4, h5 {
font-family: 'اسم الخط 2';
}

يمكنك استخدام هذه الطريقة لتغيير شكل خط : الازرار ، القائمة الرئيسية ، العناوين ، الخ …

معلومة
لمعرفة نوع css class الذي تريد تخصيص خطه ، استخدم اداة inspect في المتصفح .

خلاصة

الآن بعد معرفة طريقة تغيير الخطوط في كل لغة ، ساقوم بمثال اخير يلخص الشرح :

<!-اللغة العربية->
/*تغيير خط الفقرات*/
html[lang="ar"] p { 
font-family: 'اسم الخط 1'; /**/
} 
/*تغيير خط العناوين*/
html[lang="ar"] h1, h2, h3, h4, h5 {
font-family: 'اسم الخط 2';
}

<!-اللغة الفرنسية->

/*تغيير خط القائمة الرئسية*/
html[lang="fr"] .main-navigation { 
font-family: 'اسم الخط 1'; /**/
} 
/*تغيير خط الازرار*/
html[lang="fr"] .button {
font-family: 'اسم الخط 2';
}

نستخلص انه يمكننا تغيير نوع الخط في اي لغة نريد ، كذلك تغيير اللخطوط في كل محتوى الموقع من الازرار الى القائمة الرئيسية .

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

use font in multi language wordpress



add two fonts for each languages

add fonts for each languages

اضافة خط لكل لغة

اضافة خط لكل لغة موقع ووردبريس

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

إضافة الخطوط العربية في الووردبريس

كتب بواسطة

يونس أوما

كاتب محتوى و مدير مواقع ، ووردبريس هو مجال تخصصي و أستخدمه منذ أكثر من 3 سنوات

مقالات ذات صلة

أضف تعليق