يعد اختيار نوع الخط على موقعك جزءًا أساسيًا من التصميم ، مثل الألوان والصور والعناصر الأخرى ، تلعب الخطوط دورًا كبيرًا في كيفية إدراك الزوار لموقعك.
لحسن الحظ ، هذا أيضًا أحد تلك الجوانب التي يتيح لك ووردبريس تخصيصها بحرية. من أجل مساعدتك على القيام بذلك ، ساقوم بشرح مبسط لكيفية اضافة خط او خطوط مختلفة لكل لغة خاصة على موقع ووردبريس .
قبل ان ابدأ الشرح يجب عليك ان تتوفر على جميع الخطوط و ان تقوم بإضافتها الى موقعك ووردبريس ، إن لم تكن تعرف ذلك تصفح هذه المقالة :
تغيير الخط لكل لغة
اذا كنت ترغب في استعمال خط واحد لكل لغة ، اي بمعنى انه لديك خط واحد يشمل جميع الاوزان ، مثال في الصورة ادناه :
مثال آخر :
لديك 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 الخاص بالغة التي تستعملها اضغط هنا .
اضافة 3 خطوط مختلفة (او اكثر) لكل لغة
اذا كنت ترغب في استعمال اكثر من خط مختلف في كل لغة ، بمعنى انه في الفقرات تستخدم خط معين و في العناوين تستخدم خط مختلف آخر الخ …
تستعمل نفس الطريقة الاولى لكن سنغير فقط css class لكل خط ، مثال :
/*تغيير خط الفقرات*/
html[lang="ar"] p {
font-family: 'اسم الخط 1'; /**/
}
/*تغيير خط العناوين*/
html[lang="ar"] h1, h2, h3, h4, h5 {
font-family: 'اسم الخط 2';
}
يمكنك استخدام هذه الطريقة لتغيير شكل خط : الازرار ، القائمة الرئيسية ، العناوين ، الخ …
خلاصة
الآن بعد معرفة طريقة تغيير الخطوط في كل لغة ، ساقوم بمثال اخير يلخص الشرح :
<!-اللغة العربية->
/*تغيير خط الفقرات*/
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
اضافة خط لكل لغة
اضافة خط لكل لغة موقع ووردبريس
كيفية إضافة خطوط ووردبريس مخصصة لك لغة
إضافة الخطوط العربية في الووردبريس