Google font issue

Question

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>

Answer 1

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>