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 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>