How to load different css file depending on language

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.

Read More

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.

Related posts

Leave a Reply

1 comment

  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' );