How to write in Hindi font (or other language font) in HTML | ASP.NET Core | Rajesh Gami

How to write in Hindi font (or other language font) in HTML | ASP.NET Core

 

This blog will show you how to read and write in Hindi (or you can use any language you want).

This section describes how to use the Devlys_010 font to write Hindi in ASP.NET Core text fields. Therefore, follow the steps below.

Step 1 

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

This is a ZIP file, so you can unzip it into a folder.

Step 2 

Open the Asp.Net Core project and create a new folder under CSS. Give the folder a name like Fonts.

Paste the downloaded fonts into the Fonts folder. Then create a CSS file and name it font.css.

 

 

 

You can see that we have added a screenshot here. I inserted the fonts in ttf format and created font.css in the newly created "Fonts" folder.

Step 3 

Now open font.css in the editor. Next, let's add fonts to the project using @ font-face. Therefore, write the CSS code in font.css as follows:

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

Step 4

Next, create a new CSS class under @ font-face in font.css and add the font family used by @font-face.

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

Now you can see all the CSS code in font.css.

1. @font-face {  
2.     font-family: 'Devlys_010';  
3.     src: local('Devlys_010'),url('./Devlys_010.ttf') format('truetype');  
4. }  
5.   
6. .hFont {  
7.     font-family: 'Devlys_010' !important;  
8. }  

Now I added the .hFont class. You can change this name.

Step 5

 

Next, go to the cshtml page where you want to write the Hindi font. So if you use the text input type, just add the hFont class as follows:

Then add CSS to the header to get the CSS code.

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

Now add a CSS class to create a Hindi font. See the code below. Added hFont class to input type.

1. <input asp-for="@Model.AdminMaster.AdminName" class="form-control hFont" id="txtAdminName" />  
2. 
   
3. OR
4. 
   
5. <input type = "text" class="form-control hFont" id="txtAdminName" />  

Note

You can use other fonts just by adding and using fonts in CSS. Also, use language fonts such as Gujarati, Marathi, Urdu, or other languages.

Reference from my C# Corner blog : C# Corner Blog Link