The lang Attribute and Fonts

The lang attribute is used to define the language of the document or a single element.

1<html lang="en"></html>

Adding the lang attribute to an element seems to affect which glyphs in a web font some browsers render, and whic…


This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad

The lang attribute is used to define the language of the document or a single element.

1<html lang="en"></html>

Adding the lang attribute to an element seems to affect which glyphs in a web font some browsers render, and which system font is rendered. Here is a demo where different paragraphs have different lang values, but they all share font-family: sans-serif:

See the Pen lang attribute and fonts by Hussein Al Hammad (@hus_hmd) on CodePen.


If you are using Chrome, you can check the "Computed" tab in DevTools to check the rendered font. You may get different fonts depending on the fonts you have installed on your device.

Is this a problem?

In the demo above it seems to me that the browser tries to pick a font that is better suited for the specified language, which is a fair behaviour.

However, a number of developers reported that their web font renders differently based on the value of the lang attribute. It looks like the browser renders different glyphs of the same font:

Luckily you can force the browser to render the font in a specific locale with the -webkit-locale property:

1[lang=sr] * {
2 -webkit-locale: "en";
3}
1<html lang="sr"></html>


This content originally appeared on Hussein Al Hammad and was authored by Hussein Al Hammad


Print Share Comment Cite Upload Translate Updates
APA

Hussein Al Hammad | Sciencx (2020-10-30T00:00:00+00:00) The lang Attribute and Fonts. Retrieved from https://www.scien.cx/2020/10/30/the-lang-attribute-and-fonts-2/

MLA
" » The lang Attribute and Fonts." Hussein Al Hammad | Sciencx - Friday October 30, 2020, https://www.scien.cx/2020/10/30/the-lang-attribute-and-fonts-2/
HARVARD
Hussein Al Hammad | Sciencx Friday October 30, 2020 » The lang Attribute and Fonts., viewed ,<https://www.scien.cx/2020/10/30/the-lang-attribute-and-fonts-2/>
VANCOUVER
Hussein Al Hammad | Sciencx - » The lang Attribute and Fonts. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/10/30/the-lang-attribute-and-fonts-2/
CHICAGO
" » The lang Attribute and Fonts." Hussein Al Hammad | Sciencx - Accessed . https://www.scien.cx/2020/10/30/the-lang-attribute-and-fonts-2/
IEEE
" » The lang Attribute and Fonts." Hussein Al Hammad | Sciencx [Online]. Available: https://www.scien.cx/2020/10/30/the-lang-attribute-and-fonts-2/. [Accessed: ]
rf:citation
» The lang Attribute and Fonts | Hussein Al Hammad | Sciencx | https://www.scien.cx/2020/10/30/the-lang-attribute-and-fonts-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.