CODEWITHSUNDEEP
htmlcsssass
gauti
gauti

Reputation: 1274

How to use different font face for different languages?

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.

Upvotes: 5

Views: 8444

Answers (2)

SaidbakR
SaidbakR

Reputation: 13544

Simply change the font-family name value to be something like:

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

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

Then in your CSS:

.lang-eng{
 font-family: DroidSerifEng !important;
}

.lang-ja{
 font-family: DroidSerifJap !important;
}

Then in your html:

<body class="lang-eng"> English

and

<body class="lang-ja"> Japanese

Upvotes: 0

Miguel Calder&#243;n
Miguel Calder&#243;n

Reputation: 3091

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 */
}

Upvotes: 16

Related Questions