Background of the issue:
I am developing a site and want to use a separate font for the Arabic language, which is the second language on my site. I have added CSS to achieve this.
Symptoms:
The CSS I added is not working.
Questions:
How can I apply a separate font for the Arabic language using WPML?
Thank you for contacting WPML Support. If the theme you are using on your site does not allow different theme options in different languages setting, then it might be not possible, but it would be worth to try the following:
1. Try to use the ‘:lang’ selector with language code just before other CSS selectors to use different CSS/fonts for different languages. So in this case you may use this type of CSS to apply different fonts in Arabic language.
2. You may write your CSS style in different CSS files and load each file in that language. To load the correct CSS file, You can use the “wpml_current_language” hook to get the current language code and load that CSS file accordingly. You may include those CSS files in your theme header.php file or similar (it depends on your theme file structure):
<?php
//Get current language
$my_current_lang = apply_filters( 'wpml_current_language', NULL );
// If the language is English
if( $my_current_lang == 'en' ) {
//include English Styles or Fonts here
}
// if the language is Arabic
elseif( $my_current_lang == 'ar' ) {
//include Arabic Styles or Fonts here
}
?>