Custom fonts in IE9 input tag

Question

Earlier i've asked about font-face in IE8+.

Now i faced with another problem with fonts. You can see it on screenshot above:

The problem is that font i've used in input is the same as font used for button. Both elements uses cyrillic characters. But as you can see, cyrillic doesn't work in input tag and it works fine on button.

Is there any IE9+ specific problems with @font-face and input tag? I've tried to google it with no luck.

Font which i've used you can download here. This archive includes all of web-font types (ttf, eot, woff and svg).

UPD: Example

CSS:

@font-face {
    font-family: "LT Round";
    src: url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.eot);
    src: url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.eot?#iefix) format("embedded-opentype"),
         url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.woff) format("woff"),
         url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.ttf) format("truetype"),
         url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.svg#a_futuraroundregular) format("svg");
    font-weight: normal;
    font-style: normal;
}

body{
    padding: 30px;
}

p{
    font: 16px/normal 'LT Round';
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 20px;
}

.bad-font-face{
    font: 18px/30px 'LT Round';
    border: 1px solid #ccc;
    padding: 0 30px;
    height: 30px;
    width: 200px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

HTML:

<p>This is an expample of wrong rendering cyrillic font-face in IE8+</p>

<input type="text" class="bad-font-face" value="тут будет bad font face">

Live demo on JSFiddle

Thanks in advance.

Answer 1

Sorry to be the bearer of bad news. It's a browser issue - not a CSS or font file issue.

If you put Cyrillic text in the p tag of that fiddle, you can see the font rendering Cyrillic text just fine (works with both the .eot and .woff files you supplied).

Internet Explorer (at least up to version 10) simply refuses to render certain font subsets for text inputs when using @font-face.

I would also advise against using frameworks like cufón to solve this issue, since those will introduce a lot of usability issues when used on text fields.

There's not much we can do about this issue except for using a default font for these fields in Internet Explorer.