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.

  • 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 Jun 9 '18 at 6:43
  • So class is the only solution? @JacobPeattie – Shriram Jun 9 '18 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 Jun 9 '18 at 7:10

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:

    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;

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.