Q:

Different glyphs selection for different language

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>

A:

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.

A:

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.

A:

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

