Language Reference, Font-family

Question

There are three basic languages used on my website. I put lang="en" in html tag. In the CSS file I write the following:

body {

 ...
 font-family: 'Open Sans';
 font-size: 10pt;
 ...
}

So, if the text on the website is in English either Russian it uses the web font called Open Sans. And this works OK.

Now I want to make so when I write a text in Armenian it to use a web font Arian AMU, but it doesn't work this way: font-family: 'Open Sans', 'Ariam AMU';

In the CSS, I write

:lang(hy) {
    font-family: 'Arian AMU';
    font-size: 10.5pt;
    line-height: 18px;
}

And I put lang="hy" in p tags when the whole text is in Armenian.

The question is, how can I make it so that if the language is Russian or English, it writes in Open Sans 10pt and when it's Armenian, Ariam AMU 10.5pt and line-height of 18px.

score 0 · Answer 1 · answered Aug 14 '13 at 04:44

The pseudo-class :lang has more specificity than the element selector body. This may cause issues when the two rules conflict, like in your case. Try specifying all the conflicting rules with the same specificity:

:lang(en), :lang(ru) {
    font-family: 'Open Sans', sans-serif;
    font-size: 10pt;
}

:lang(hy) {
    font-family: 'Ariam AMU';
    font-size: 10.5pt;
    line-height: 18px;
}

See jsFiddle.

You can learn more about CSS specificity by reading these articles:

Language Reference, Font-family

1 Answers1