Search code examples
cssfontsinternationalizationlessmultilingual

Language-specific LESS classes which contain @font-faces not working

I have a bilingual site using i18n. i18n attaches classes to the and tags of the site when it renders. For example, I have:

<html class="en">
  <body class="i18n-en">
  </body>
</html>

And when the user switches languages, the following renders:

<html class="ar>
  <body class="i18n-ar">
  </body>
</html>

I've created a LESS file which programmatically loads a different font to replace the English default font when the Arabic version of the site loads, as follows:

body.i18n-en {
    @font-face {
        font-family: 'DinAlternateBold';
        src: url('../fonts/din-alternate-bold.ttf') format('truetype');
    }
}

body.i18n-ar {
    @font-face {
        font-family: 'DinAlternateBold';
        src: url('../fonts/Harmattan-Regular.woff') format('woff');
    }
}

Note that I am calling "Harmattan-Regular.woff" with the same variable name as "din-alternate-bold.ttf", so that the replacement of all instance of DinAlternateBold on the site is automatic.

However, it is not working. Whichever font is declared later in the LESS file is getting loaded to the page, regardless of the class of the body. In the case I presented above, both the Arabic and English versions of the site are loading Harmattan-Regular.woff.

Is there something fundamental about how fonts behave in CSS/LESS that I'm missing? If so, what would be a proper way to achieve the effect I'm looking for?

It should be noted that each font does load properly when used alone—it is only in combination that I'm running into problems.

Solution

  • You can try it like this:

    @font-face {
    font-family: 'din-alternate-bold';
    src: url("../fonts/din-alternate-bold.eot?-gqzqge");
    src: url("../fonts/din-alternate-bold.eot?#iefix-gqzqge") format("embedded-opentype"), 
         url("../fonts/din-alternate-bold.ttf?-gqzqge") format("woff"), 
         url("../fonts/din-alternate-bold.ttf?-gqzqge") format("truetype"), 
         url("../fonts/din-alternate-bold.svg?-gqzqge#din-alternate-bold") format("svg");
    font-weight: normal;
    font-style: normal
}

body.i18n-ar {
    font-family: 'din-alternate-bold';
}

    You can try to generate your font here for easier and faster way.