Docs

[Bassem]

Hi,

Would you please tell me how to add a custom font or a Google font to RTL version only.
I need the basic LTR version to remain as is.

Regards,
Bassem

[Christopher]

Hi there,

Please provide us with URL of RTL version of your site.

Thanks.

[Bassem]

This reply has been marked as private.

[Rad]

Hi there,

You can simply add this at your child theme’s style.css

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);

Because this is a custom font, then this is not directly applied to elements. You should manually apply them, example, let say the headings.

.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6, .rtl .h1, .rtl .h2, .rtl .h3, .rtl .h4, .rtl .h5, .rtl .h6 {
    font-family: 'Droid Arabic Kufi', sans-serif !important;
}

The idea is to add .rtl as prefix for your target class names. Applying the font for other elements should be just the same, but with different class names.

If you wish to apply it to all elements, then try this.

.rtl * {
    font-family: 'Droid Arabic Kufi', sans-serif !important;
}

Cheers!

[Bassem]

Thank you so much for the detailed explanation and prompt support “AS USUAL” 🙂

[Thai]

You’re most welcome 🙂

[Bassem]

This reply has been marked as private.

[Christopher]

Hi there,

Please remove the code.
Find this code :

.rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6, .rtl .h1, .rtl .h2, .rtl .h3, .rtl .h4, .rtl .h5, .rtl .h6 {
    font-family: 'Droid Arabic Kufi', sans-serif !important;
}

And update it to :

body.rtl, .rtl h1, .rtl h2, .rtl h3, .rtl h4, .rtl h5, .rtl h6, .rtl .h1, .rtl .h2, .rtl .h3, .rtl .h4, .rtl .h5, .rtl .h6,.rtl p,.rtl a {
    font-family: 'Droid Arabic Kufi', sans-serif !important;
}

Hope it helps.

[Bassem]

Thanks 🙂

[Christopher]

You’re welcome.

[Author]

Posts