CODEWITHSUNDEEP
cssfonts
ankita patel
ankita patel

Reputation: 4251

Google font issue

I want to give two different font-family to text like if someone type in Gujarati then font is Mukta Vani and English then font is roboto. Is it possible..? If someone knows then please help me.

table{
  font-family: 'Roboto', sans-serif; /**for english**/
}
table td{
  font-family: 'Mukta Vaani', sans-serif; /**Only for gujarati**/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/css?family=Mukta+Vaani:400,500&amp;subset=gujarati" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

<table class="table grid-table table-striped  table-hover ">
  <tr><th>Title</th><th>description</th></tr>  
  <tr><td>સ્થળ નક્કી કરવું</td><td>Demo text</td></tr> 
  <tr><td>Test</td><td>Test</td></tr> 
</table>

Upvotes: 6

Views: 362

Answers (1)

Temani Afif
Temani Afif

Reputation: 273934

The second font styling will always be applied. It's more specific than the first one as it target the td element. Instead you can use class for non-english text and make the english the default one for td.

table td,table th{
  font-family: 'Roboto', sans-serif; /**for english**/
}
table td.guj,table th.guj{
  font-family: 'Mukta Vaani', sans-serif; /**Only for gujarati**/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/css?family=Mukta+Vaani:400,500&amp;subset=gujarati" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

<table class="table grid-table table-striped  table-hover ">
  <tr><th>Title</th><th>description</th></tr>  
  <tr><td class="guj">સ્થળ નક્કી કરવું</td><td>Demo text</td></tr> 
  <tr><td>Test</td><td>Test</td></tr> 
</table>

UPDATE

You can add a jQuery code to test if the content is english or not and then add the class :

/* we suppose that english will only contain letter from a to z and numbers
   update if you want for example to consider special character, dots, quotes, etc */
var eng = /^[A-Za-z0-9]*$/;

$('td,th').each(function() {
  if (!eng.test($(this).text().replace(/\s/g, '')))
    $(this).addClass('guj');
});
table td,
table th {
  font-family: 'Roboto', sans-serif;/**for english**/
}

table td.guj,
table th.guj {
  font-family: 'Mukta Vaani', sans-serif; /**Only for gujarati**/
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link href="https://fonts.googleapis.com/css?family=Mukta+Vaani:400,500&amp;subset=gujarati" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

<table class="table grid-table table-striped  table-hover ">
  <tr><th>Title</th><th>description</th></tr>  
  <tr><td >સ્થળ નક્કી કરવું</td><td>Demo text</td></tr> 
  <tr><td>Test</td><td>Test</td></tr> 
</table>

Upvotes: 1

Related Questions