Growing with the Web

Apply fonts based on language using CSS3

Published
Tags:

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;
}
@font-face {
  font-family: FancyKorean;
  src: local('Batang');
  unicode-range: U+AC00-D7AF;
}
.fancy {
  font-family: FancyJapanese, FancyKorean, "Times New Roman", Times, serif;
}

Like this article?
Subscribe for more!