English Font and RTL Arabic Font

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.

Comments

  • Hello,
    Here you will find the answer for your question:

    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
  • 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 :) 
  • 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
  • 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.
  • Please send me a link to your website, I'll show you example code which should be used.
    Thanks
  • https://dev.konn.tech/?page_id=266&lang=ar 
    this is the sample page i am working on for arabic, im still modifying it.
  • 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
  • the english font that appears on the RTL pages changes to Arial, but not the Arabic content itself
  • 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
  • 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.

  • Please try this code:
    #Header_wrapper .menu-item a{
    font-family: Tajawal !important;
    }
    Thanks
Sign In or Register to comment.