How to load different css file depending on language

Question

I am running a multilingual wordpress site - English and Japanese. I am using transposh plugin to make the English text translated to Japanese. And when the user choose Japanese, there will be a words "ja" appended to my url. (This problem should be independant of the Transposh plugin.)

For example, www.momorice.com is the english site, while www.momorice.com/ja/ denotes the Japanese page.

I would like to load different css files depending on the language that the user choose. The solution that i can think of is to detect the url for the characters "ja", if found, i will then have to point all my css file to japanese css file. Is this a recommended way? If so can someone give me some guideline to do this?

I realized I can make use of @font-face unicode-range to specify certain japanese font type for japanese characters. However this is not supported in Firefox browser. So I will not resort to this method.

Answer 1

function load_my_styles() {
    wp_register_style( 'my-en-style1', plugins_url( 'en-style1.css', __FILE__ ) );
    wp_register_style( 'my-en-style2', plugins_url( 'en-style2.css', __FILE__ ) );

    wp_register_style( 'my-ja-style1', plugins_url( 'ja-style1.css', __FILE__ ) );
    wp_register_style( 'my-ja-style2', plugins_url( 'ja-style2.css', __FILE__ ) );

    $lang = preg_match( '/^\/ja\//i', $_SERVER['REQUEST_URI'] ) ? 'ja' : 'en';
    wp_enqueue_style( "my-{$lang}-style1" );
    wp_enqueue_style( "my-{$lang}-style2" );
}
add_action( 'wp_enqueue_scripts', 'load_my_styles' );