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.

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.

• css
• fonts

• You can't style text based on language. You need to identify that text with a unique class of some kind which can be used for CSS. – Jacob Peattie Commented Jun 9, 2018 at 6:43
• So class is the only solution? @JacobPeattie – Shriram Commented Jun 9, 2018 at 6:45
• I agree with Jacob, CSS alone (without a class or id) can't do this for you. What plugin are you using for the translations, WPML?Then i can give you a solution. But we need something else then pure css to accomplish this. – Bjorn Commented Jun 9, 2018 at 7:10

3 Answers 3

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.

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

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/projects/regexp-unicode-block (Choose the block range relevant to your lang).