Type Hindi text in TextBox using CSS and jQuery in ASP.Net MVC

Here i have created one example. You need to change the code as per your requirement.

For typing in hindi you need to download the font from the link below.

https://www.ffonts.net/Kruti-Dev-010.font.download

Then copy the font in the project folder to use the font in your code.

HTML

<div>
    <table id="rblLanguage">
        <tr>
            <td>
                <input id="rblLanguage_0" type="radio" name="rblLanguage" value="English" /><label
                    for="rblLanguage_0">English</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="rblLanguage_1" type="radio" name="rblLanguage" value="Hindi" /><label
                    for="rblLanguage_1">Hindi</label>
            </td>
        </tr>
    </table>
    <textarea name="txtText" id="txtText" rows="5"></textarea>
</div>
<style type="text/css">
    @font-face
    {
        /* Font Name to use*/
        font-family: 'HindiFont';
        /* Font path*/
        src: url('<%= ResolveUrl("~/k010.ttf") %>');
    }
    body
    {
        font-size: 20px;
    }
    .hindiFont
    {
        /* Assign the font*/
        font-family: 'HindiFont';
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=rblLanguage]').on("change", function () {
            var selected = $(this).find('input:checked').val();
            var textBox = $('[id*=txtText]');
            if (selected == "Hindi") {
                $(textBox).attr('class', 'hindiFont');
            }
            else {
                $(textBox).attr('class', '');
            }
        });
    });
</script>

Screenshot

<style type="text/css">
    @@font-face {
        /* Font Name to use*/
        font-family: 'HindiFont';
        font-size: large;
        src: url("../../k010.TTF")format('truetype');
       
    }

    body {
        font-size: 20px;
    }

    .hindiFont {
        /* Assign the font*/
        font-family: 'HindiFont';
        /*here we need to access @@font-face also*/
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        debugger;

        $('[id*=rblLanguage]').on("change", function () {
            var selected = $(this).find('input:checked').val();
            var textBox = $('[id*=Description]');
            if (selected == "Hindi") {
                $(textBox).attr('class', 'hindiFont');
            }
            else {
                $(textBox).attr('class', '');
            }
        });
    });
</script>
 
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
 
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                Edit News
                <small>@*Preview*@</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Admin</a></li>
                <li class="active">Edit News</li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-default">
                <div class="box-body">
                    <div class="row">
                        <div class="form-horizontal">
                            <h4></h4>
                            <hr />
                            <div>
                                <table id="rblLanguage">
                                    <tr>
                                        <td>
                                            <input id="rblLanguage_0" type="radio" name="rblLanguage" value="English" /><label for="rblLanguage_0">English</label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input id="rblLanguage_1" type="radio" name="rblLanguage" value="Hindi" /><label for="rblLanguage_1">Hindi</label>
                                        </td>
                                    </tr>
                                </table>
 
 
 
                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                @Html.HiddenFor(model => model.ID)
                                 
                                    <div class="col-sm-7">
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-3" })
                                            <div class="col-md-9">
                                                @Html.TextAreaFor(m => m.Description, new { @class = "form-control required", @rows = "6" })
                                                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-offset-3 col-md-9">
                                            <input type="submit" value="Update" class="btn btn-default" /> &nbsp;&nbsp;&nbsp;
                                            @Html.ActionLink("Cancel", "Index", "", new { @class = "btn btn-default" })
                                        </div>
                                    </div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </section>
                                </div>