How To Write In Hindi (Or Another Font) In ASP.NET Core

Using fonts write in multiple languages like Gujarati, Hindi, Urdu in asp.net core.

In this blog I am explaining how to read and write in the Hindi Language (or we can use any language as per our requirement). 

 

Here I will explain how to write Hindi in an ASP.NET Core text box using Devlys_010 font. So please follow the below steps .

 

Step 1

 

Download Devlys_010 font in any format like .ttf , .woff, etc. You can download from here

 

This is a zip file so you can extract it in the folder.

 

Step 2

 

Open your Asp.Net core project and create a new folder under css. Give the folder a name like Fonts.

 

Under the Fonts folder paste the downloaded font which we have already exctracted. And now create one css file and give it the name font.css

 

 

 

Here you can see I have added a screenshot. I have pasted a ttf format font and created a font.css under a newly-created folder, Fonts.

 

Step 3

 

Now open font.css in your editor. Now we add font in our project using @font-face.

 

So write the css code in your font.css like below:

@font-face {
    font-family: 'Devlys_010';
    src: local('Devlys_010'),url('./Devlys_010.ttf') format('truetype');
}

Step 4

 

Now create a new class css in font.css below @font-face and add a font family which we have using @font-face. 

.hFont {
    font-family: 'Devlys_010' !important;
}

Now you can see all css code in font.css

@font-face {
    font-family: 'Devlys_010';
    src: local('Devlys_010'),url('./Devlys_010.ttf') format('truetype');
}

.hFont {
    font-family: 'Devlys_010' !important;
}

Here I have added .hFont class -- you can change this name.

 

Step 5

 

Now go to your cshtml page where you want to write your Hindi font. This means If you have used input type text then just add class hFont like below.

 

And add css in header for getting our css code.

<link href="~/css/fonts/font.css" rel="stylesheet" />

Now add css class for writing Hindi font. See in the below code I have added hFont class in input type.

<input asp-for="@Model.AdminMaster.AdminName" class="form-control hFont" id="txtAdminName" />

OR

<input type = "text" class="form-control hFont" id="txtAdminName" />

Note

You can use any other font also just add font in css and use it. Also use any language font like Gujarati, Marathi, Urdu or any other language.