How to use different font face for different languages?

Question

I have developed my web app which supports English and Japanese. I have different font-face in English. Recently i got requirement like different font face for Japanese for some elements such as h1, h2, p.

font names are already written for many elements. So i cannot go and change for each elements. Suggest me to handle this situation.

I can add class to body as "lang-eng" or "lang-ja" as per language.

English:

@font-face {
  font-family: "DroidSerif";
 src: url("https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf")
format("truetype");
}

Japanese :

@font-face {
font-family: "DroidSerif";
 src: url("https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-
 Regular.woff2")
    format("truetype");

}

Is it possible to use same font-face name and different src ? Thanks in advance.

Answer 1

You can specify the subset of characters that each font family src should be used with, as explained here. Your example would look like this:

@font-face {
  font-family: "DroidSerif";
  src: url("https://rawgit.com/google/fonts/master/ufl/ubuntumono/UbuntuMono-Italic.ttf")
  format("truetype");
  unicode-range: U+000-5FF; /* Latin glyphs */
}


@font-face {
  font-family: "DroidSerif";
  src: url("https://fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2")
  format("truetype");
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}