English Font and RTL Arabic Font

buraiqat

hello, 
our website has two languages, english and arabic, is it possible for the arabic to have a separate font? if so, how can this be done? 
and if we want  assign headers for the arabic, do we have to use custom css or is this translated via the string translator? 

note: we do have wpml installed.

Pablo

Hello,

Here you will find the answer for your question:

https://wpml.org/forums/topic/different-fonts-for-different-languages-in-theme-customize-typography/

But, as I see, the forum is not working right now - it will be available in few hours.

Surely, you will be able to do that with the CSS code, WPML leave the CSS class in body tag depending on the language, so just catch it and style it out.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

buraiqat

is there no way for me to do this via betheme's muffin builder? 

can i find the css class in the body tag in the theme's css files? or in the header.php? i apologise if i am mixing up the terms, i'm still learning how to do these things.

thank you for your help and understanding  

Pablo

Through the Muffin Builder you will be able to change the font family only of the content of the page, stuff like menu, footer or sidebars will not be able to change then.

The CSS code from the page I sent you earler would be the best solution in my humble opinion.

Of course, even if you will do it through the CSS code (global), then inline CSS will work too (inline css is more important than global style)

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

buraiqat

hello, 
the previous method you suggested doesnt seem to work, because i dont want to modify the string for only one area, I want the entire arabic version of the side to have a different font family. so i dont really understand where i should be placing the CSS Code, or even how to modify it. 

the english should have roboto condensed, while the arabic should have something like Tajawal, which is an arabic-friendly font the comes from Betheme.

even when i inspect the page from front end, the arabic font does not change when i make temporary edits.

Pablo

Please send me a link to your website, I'll show you example code which should be used.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

buraiqat

https://dev.konn.tech/?page_id=266&lang=ar 
this is the sample page i am working on for arabic, im still modifying it.

Pablo

Please use this CSS code in Theme Options > Custom CSS & JS > CSS

body.rtl, body.rtl #Content, body.rtl #Header {
  font-family:'Arial' !important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

buraiqat

the english font that appears on the RTL pages changes to Arial, but not the Arabic content itself

Pablo

Change the font family from "Arial" to other, to one of the "Arabic" fonts.

The CSS I send you will only change the content from RTL website.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

buraiqat

hello, we eventually changed the H5 and H6 font to the arabic one, and used those for all arabic content.

but for now, we need the RTL Header, to be a different font than the LTR one. is there any custom CSS we can add to the The Options Custom CSS?
we've tried 

header_wrapper {

font-family: Tajawal;

}

and

.menu-item {

font-family: Tajawal;

}

neither have worked.

Pablo

Please try this code:

#Header_wrapper .menu-item a{
	font-family: Tajawal !important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next