CODEWITHSUNDEEP
cssunicodefontsinternationalization
Franky
Franky

Reputation: 81

Use different fonts for Latin characters and Japanese characters with CSS

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)

Upvotes: 8

Views: 12106

Answers (4)

Shaheed Mon
Shaheed Mon

Reputation: 491

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>

Upvotes: 12

djrsargent
djrsargent

Reputation: 394

Create css class for English and Japanese text.

.ja { font-family: meiryo, sans-serif; }
.en { font-family: arial, verdana, sans-serif; }

If entire page is in Japanese, add class="ja" to body tag, if there's mixed content, add class="ja" to the html element that contains Japanese text, for example:

<td class="ja">日本語</td>

Upvotes: 5

Blaise
Blaise

Reputation: 13479

You cannot get around marking every language section with a class and font if you want this to work cross-browser. It cannot be done with only CSS.

You can apply a language class manually or automatically. Manually might be a lot of work to support and maintain, but is robust. Dynamically it can be done using a back-end script or Javascript, by scanning a string for characters that fall within certain unicode character blocks, and applying a language class accordingly.

You can find the block definitions here (Japanese is Hiragana and Katakana): http://www.fileformat.info/info/unicode/block/index.htm

I'd recommend the back-end way of doing this, because changing a font on the page might cause flickering or shifting of elements during page load.

Upvotes: 5

Ben Chaplin
Ben Chaplin

Reputation: 61

How are you telling the page what language to print to screen?

If you are getting a variable can you not use this variable as a class which you use for a div of body.

<body class="english">

or

<body class="japanese">

Upvotes: 0

Related Questions