Use different fonts for Latin characters and Japanese characters with CSS

Question

We are creating a site that uses both Japanese and English. We want to get away from the default Japanese fonts which can't use ClearType. Is there a way to tell the browser to use a different Japanese font JUST for Japanese characters (Like Meiryo) and another font just for latin characters (Like Helvetica) on the same page? We don't want any English words to use the Meiryo font.

We actually used a tip to specify English fonts first in the CSS from this article: http://www.lukew.com/ff/entry.asp?118

However, this doesn't work in IE. Even if we specify Helvetica, Verdana, or any other widely available font first and then the Japanese font in the CSS, IE will still use the Japanese font for English words. Firefox, Chrome, etc. work as expected.

(If possible we hope not to resort to something like wrapping each English word in a span)

Answer 1

I've solved my problem using 'unicode-range' CSS property.

You can find the details here: https://developer.mozilla.org/en/docs/Web/CSS/@font-face/unicode-range

Example:

/* bengali */
@font-face {
  font-family: 'Atma';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/atma/v2/tUcVDHNCVY7oFp6g2zLOiQ.woff2) format('woff2');
  unicode-range: u+0980-09FF;
}


body {
  font-family: 'Atma', arial, sans-serif;
  font-size: 18px;
}

<p>Example is better than precept.</p>
<p>উপদেশের চেয়ে দৃষ্টান্ত ভালো।</p>