How to add hindi font in html css (english alphabet to hindi alphabet like ( kaise ho =>कैसे हो) )

Question

I am using 1st-time @font-face and facing some issue that my form label need two languages (1) English and (2) Hindi

I want the content of the text box in Hindi instead of the English alphabet.

For Hindi font I made below CSS added external CSS font but it's not coming on my form, then I called my class into my HTML but HTML is taking junk values, I don't know where I doing some mistakes please suggest me a solution.

@font-face {
  font-family: hindi !important;
  font-style: normal;
  font-weight: 400;
  src: url('file:///C:/Users/Tapas/Desktop/java%20script/es6/Kruti_Dev_010.ttf');
}

.lang-hindi {
  font-family: hindi !important;
}

<p class="lang-hindi"> kaise ho</p>

I am expecting the Hindi alphabet as an output but it's showing only the English alphabet, can anyone please help me with the solution.

https://stackoverflow.com/questions/12144000/using-custom-fonts-using-css — Martin, Jul 16 '19 at 08:53
Possible duplicate of [using krutidev font to print css in html](https://stackoverflow.com/questions/18288645/using-krutidev-font-to-print-css-in-html) — rajmathan, Jul 16 '19 at 09:14

score 0 · Accepted Answer · answered Jul 16 '19 at 09:05

go to this site: https://www.web-font-generator.com/
upload your (Kruti_Dev_010.ttf) generate the web font
download generated font there will be CSS file in download files along with .woff, .svg, .eot and .ttf files as well
copy CSS style and correct file paths then use it into you web page

score 0 · Answer 2 · answered Jul 16 '19 at 10:32

0

To use kruti dev font you cannot type the text like 'kaise ho' you need to use hindi keyboard layout to type -

so for example if you want to write

then you will in your html you will write - 'lkoZtfud izU;kl efUnj Jh egkdkys'oj '

answered Jul 16 '19 at 10:32

Monika Mangal

1,665
7
17

score -1 · Answer 3 · answered Jul 16 '19 at 08:44

You can better use Google Fonts, https://fonts.google.com/

Select your font over there, and add this to your web-page.

The answer you are looking for is a bit difficult but you can write whatever your desired text using google font and it will work on all browsers.

How to add hindi font in html css (english alphabet to hindi alphabet like ( kaise ho =>कैसे हो) )

3 Answers3