Multilingual website and CSS font families - css

Question

I have been googlying around now about this matter and I find few ways to do it. But what is the best way to do it.
I have website that has +10 different languages. Some languages need own font (chinese, japanese for example). Normal english and most western versions will use Google's Open Sans. But what about japanese etc. How should I do font-family declaration?
Like this putting all fonts in same declaration?
body {
font-family: 'Open Sans', Arial, Helvetica, 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', 'MS PGothic', sans-serif;
}
'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑' are MS Gothic is japanese windows font.
Or separate them?
Of course this would mean lot of more css than just body (h1, h2, p...)
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
body.chines {
font-family: 'Open Sans', 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', sans-serif;
}
body.japanese {
font-family: 'Open Sans', 'MS PGothic', sans-serif;
}
I'm using Compass/sass btw

Answer 1

Best way to deal different languages is to have different css file for different language, which reduces page load time and resources.
Secondly, the asterisk implies all elements.
* {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

Answer 2

There is something called unicode-range you could use.
It is used to display a certain font for a range of specific characters.
This might help you to find the range of characters you want to include.
Ideally you have to setup all the fonts you need once.
And through unicode-range the browser uses the font that contains that character, and nothing is unnecessarily downloaded.