@font-face Hindi font is not coming on the form

[shahzadsiddiqui8]

Hi,

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

for Hindi font I made below CSS but its not coming on my form, then I called my class into my HTML but html is taking junk values, I dont know where I doing some mistakes please suggest me solution…

@font-face {
  font-family: 'devnagari';
  src: url('../css/devnagari/AA_NAGARI_SHREE_L1.ttf')  format('truetype');
  font-weight: normal;
  font-style: normal;
}

.hindiFont{
font-family:'devnagari';
}

HTML

 <div class="form-group col-sm-12 col-md-6 col-lg-6">
                                  <label class="col-sm-4 col-md-4 col-lg-4 control-label" for="applicantName">
                                    Name of Applicant<span class="redClr">*</span>
                                    **<span class="hindiFont" lang="hi">?    ????? ?? ???</span>**
                                  </label>
                                  <div class="col-sm-6 col-md-6 col-lg-6">
                                    <input id="applicantName" name="applicantName" placeholder="ABC" class="form-control input-md" type="text" required="">
                                  </div>
                                  <!--<div class="col-sm-2 col-md-2 col-lg-2">&nbsp;</div>-->
                                </div>

[TechnoBear]

Which browser are you using to test? As far as I know, IE does not fully support the TTF file format, and you also need to provide the font in EOT format.

Can I use... Support tables for HTML5, CSS3, etc

[shahzadsiddiqui8]

I tried below code also, but still not working in any browser…

@font-face {
font-family: ‘devnagari’;
src: url(‘…/css/devnagari/SamyakDevanagari.eot’);
src: local(‘?’),
url(‘…/css/devnagari/SamyakDevanagari.ttf’) format(‘truetype’),
url(‘…/css/devnagari/SamyakDevanagari.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}

.hindiFont{
font-family:“devnagari”;
border:1px solid #000;
}