Menu
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>
566
What's going on is that the Arabic characters are not supported by Open Sans.
Using the Type tool, click to place the insertion point where you want to enter a character. Choose Type > Glyphs to display the Glyphs panel. To display a different set of characters in the Glyphs panel, do any of the following: Select a different font and type style, if available.
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.
181
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.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
