Arabic font Change

Hi,

Thank you for the update.

We adjusted the code so that the Cairo font only loads on the Arabic version of the site.

function av_load_google_fonts() {
     $locale = get_locale();

    if (strpos($locale, 'ar') === 0) {
        wp_enqueue_style(
            'google-fonts-cairo',
            'https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap',
            array(),
            null
        );
    }
}
add_action('wp_enqueue_scripts', 'av_load_google_fonts');

This is the updated css code:

[lang="ar"],
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] h5, [lang="ar"] h6,
[lang="ar"] p, [lang="ar"] span, [lang="ar"] li, [lang="ar"] a,
[lang="ar"] input, [lang="ar"] textarea, [lang="ar"] button {
    font-family: 'Cairo', sans-serif;
}

Best regards,
Ismael

Hi,

Thank you for the screenshot.

Adding this css code should help adjust the heading fonts.

[lang="ar"] #top #wrap_all .all_colors h1,
[lang="ar"] #top #wrap_all .all_colors h2,
[lang="ar"] #top #wrap_all .all_colors h3,
[lang="ar"] #top #wrap_all .all_colors h4,
[lang="ar"] #top #wrap_all .all_colors h5,
[lang="ar"] #top #wrap_all .all_colors h6 {
    font-family: 'Cairo', sans-serif;
}

Best regards,
Ismael

Hi,

Great, I’m glad that Ismael could help you out. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

Best regards,
Rikard