How to set different font family based on text language?

Question

I Developed one Newspaper portal in WordPress. I am using Two languages in this portal Tamil(site language) and English.

Now I am using Nova Sans Tamil font for Tamil language font and Roboto font For English

In Headings and Menus I can easily handle this problem using css, but in body of the content I can't do it because it is collaboration of two language fonts used in the site.

So the fonts are not looking good in English.

Is there any JavaScript, CSS or any other method to set different font family based on text language?

My need is

If the text is Tamil font then set Nova Sans Tamil
If the text is English font then set Roboto

(Note): I can't use different classes for English font, so don't give this solution. Because I am using English font in thousands of places, it is very hard to change.

Answer 1

This question is not about WordPress but about css. Actually there even is a straightforward solution, because css-3 has an attribute called unicode-range, which allows you to load fonts based on the character set. For Tamil the unicode block is U+0B02..U+0BCD. So, if you have the english font as a standard you can easily change the font to Tamil whenever appropriate like this:

@font-face {   
  font-family: 'NovaSansTamil';
  src: url('novasanstamil.woff') format('woff'); /* full url to font needed */
  unicode-range: U+0B02-CD;
  }

Beware that browser support is not yet universal for this feature.

Answer 2

Whichever solution you use for language switching, I am sure it sets a meta tag with the language (see case 1) or adds a class to the html or body tag (see case 2).

Case 1

If you have a meta or any other identifiable tag that holds the language value, but it is not a wrapper for your content, simply add a javascript code that watches for changes on that tag and simply add a class to the body based on what value the meta or whichever tag has.

Example based on meta tag:

<meta name="language" content="english">

JS Code:

jQuery(document).ready(function(){
    let newLang = jQuery('meta[name="language"]').attr('content');
    jQuery('body').removeClass('otherlanguage english').addClass(newLang); \\i am removing both language classes to make sure they are not added twice
});

Now check case 2 because that step comes next.

Case 2

Then in your CSS simply target

body.english p {
    font-family: whatever;
}

Answer 3

Incase anybody runs across this question in the future the easiest method (that I have found) is to simply grab your text elements, use regex to identify the character set and then add the element class as necessary.

var textElements = document.querySelectorAll(".content");
for (var i = 0; i < textElements.length; i++) {
    if (textElements[i].innerHTML.match(/[\u0B80-\u0BFF]/)) {
        textElements[i].className += " tamil";
    }
}

.content {
    font-family: "Nova Sans";
}
.tamil {
    font-family: whatever;
}

http://kourge.net/projects/regexp-unicode-block (Choose the block range relevant to your lang).