Thursday, 27 December 2012

Apply fonts based on language using CSS3

You can apply fonts based on unicode character codes using the unicode-range CSS3 rule. Fonts with a unicode-range rule will only target the specified range and fall back to other fonts with characters not in the range. Multiple ranges can be used by separating them with a comma.
@font-face {
  font-family: FancyJapanese;
  src: local('KaiTi');
  unicode-range: U+4E00-9FBF, U+3040-30FF; /* Kanji, Kana */
}

@font-face {
  font-family: FancyKorean;
  src: local('Batang');
  unicode-range: U+AC00-D7AF;
}

.serif {
  font-family: FancyJapanese, FancyKorean, "Times New Roman", Times, serif;
}
Here's an example, firstly with a regular block:

English 日本語 한국어

And now with the rules serif class applied:

English 日本語 한국어