Different glyphs selection for different language

Question

Could anyone explain to me why when I set the lang="ar" the font family selects sans-serif font while when it is lang="en" it selects Open Sans.

<html lang="ar">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', sans-serif;">
  السلام عليكم
</body>

</html>

<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', sans-serif;">
  السلام عليكم
</body>

</html>

Perhaps Open Sans does not include the characters required for that language? In such a case, it will fall back to the next font in line. — Niet the Dark Absol, Aug 13 '17 at 08:28
@NiettheDarkAbsol Thanks a lot, useful short answer. please put it as answer and I will accept it. — Mo Haidar, Aug 13 '17 at 08:31

score 11 · Answer 1 · edited Aug 20 '17 at 21:43

11

Not all fonts contain all characters. Most likely, Open Sans doesn't include the correct characters for that language and so the browser will fall to the next font in line, and so on until looking for system fonts that may have the character you need. Finally, if all else fails, you get "tofu", usually an empty box, a box with an X, or a box containing the hex code of the character.

You can find more information in the official W3C CSS Fonts Module Level 3 specification: https://www.w3.org/TR/css-fonts-3/#font-matching-algorithm.

edited Aug 20 '17 at 21:43

Nils Rückmann

593
3
16

answered Aug 13 '17 at 08:33

Niet the Dark Absol

320,036
81
464
592

6

That doesn't make sense. How does setting the lang attribute affect which characters are in the font? – Alohci Aug 13 '17 at 08:55
@Alohci your comment confused me again, your question is valid. – Mo Haidar Aug 13 '17 at 09:02
@Niet the Dark Absol could you please explain how?. – Mo Haidar Aug 13 '17 at 09:09
4

Isn't [this mechanism](https://www.w3.org/International/questions/qa-lang-why#fonts) involved here (also covered a bit in [MDN's page for](https://developer.mozilla.org/en/docs/Web/CSS/font-language-override) `font-language-override`)? – Ilya Streltsyn Aug 15 '17 at 17:05
1

The language attribute isn't affecting what characters are in the font. Font's can have characters setup for all sorts of different languages, since a lot of different languages use different symbols. So the 'Open Sans' font might not have any characters set for the language 'ar' which would mean that the browser would look at the next font, in this case sans-serif, and prioritize that font if it does have characters for 'ar'. Whether or not the this is the problem I can't say. – Tyler Bramer Aug 15 '17 at 21:03
2

@IlyaStreltsyn - That looks very much like the explanation. Care to post an answer? – Alohci Aug 16 '17 at 14:25

score 5 · Accepted Answer · answered Aug 22 '17 at 08:24

What's going on is that the Arabic characters are not supported by Open Sans. So in both your snippets, Open Sans is not being applied at all, and the browser goes straight to the fallback font.

The reason why the font looks different in both your snippets is because in your first snippet, the browser knows the language is Arabic because of the lang tag. It asks the system for the best sans-serif fallback font for Arabic, and on a Mac this is Geeza Pro Regular.

In your second snippet, the browser thinks the language is English, and asks for the best sans-serif fallback font for English. On Mac, this is Arial.

Both Geeza Pro and Arial apparently have support for Arabic text, but depending on the actual language, the system chooses one over the other.

score 3 · Answer 3 · answered Aug 15 '17 at 16:44

The fallback algorithm is completely up to the vendor, so each browser could differ in its own implementation.

What commonly happens?

Define your fontFamily list: a, b, c, d;

This list is priority based, so, the browser will lookup from l0 => ln.

glyph lookup step: The TextEngine tries to draw the text considering the given list and it gracefully fallbacks from l0 to ln.

Because your text السلام عليكم cannot be rendered with your first preferred fontFamily, it fallbacks to any sans-serif

You can find a more in-depth explanation here: https://stackoverflow.com/a/29242255/4099454

But both fonts have the glyphs inside as you can see at the code snippets. The font changes when the `lang` attribute changes and it sets either Open Sans or sans-serif and [Ilya's comment](https://stackoverflow.com/users/2533215/ilya-streltsyn) pretty explains why that happens. — Christos Lytras, Aug 16 '17 at 21:27

score 0 · Answer 4 · answered Aug 22 '17 at 08:09

For unknown reasons the '-' char of sans-serif was a problem for the arabic language, now all works ^^

<html lang="ar">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', 'sans-serif';">
  السلام عليكم
</body>

</html>

<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', 'sans-serif';">
  السلام عليكم
</body>

</html>

<html lang="it">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', 'sans-serif';">
  السلام عليكم
</body>

</html>

<html lang="zu">

<head>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
</head>

<body style="font-family: 'Open Sans', 'sans-serif';">
  السلام عليكم
</body>

</html>

Different glyphs selection for different language

4 Answers4