Showing posts with label How to write in Hindi font (or other language font) in HTML | ASP.NET Core | Rajesh Gami. Show all posts
Showing posts with label How to write in Hindi font (or other language font) in HTML | ASP.NET Core | Rajesh Gami. Show all posts

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.
 
How to write in Hindi (Or another font) in Asp.Net Core 
 

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.     srclocal('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.     srclocal('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. OR

  3. <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

RAJESH GAMI - Blog

Digital Signature Pad in Angular | RAJESH GAMI

  What is Signature Pad? Signature Pad could be a JavaScript library for drawing fancy signatures. It supports HTML5 canvas and uses variabl...