0

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

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

IE problem 2

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.

Community
  • 1
  • 1
nick.skriabin
  • 873
  • 2
  • 11
  • 27
  • What document mode is your page running in (hit F12, look at toolbar in dev tools). Are there any messages on the Console tab when loading your page? – EricLaw Sep 16 '13 at 22:20
  • I used different modes (for browser mode IE10 i've used Standard mode, for other — IEx Standard). In console there's only one message about another font (CSS3111 Error for MyriadPro font) but this is not the case. There's no messages in console about font from example (Futura Round). – nick.skriabin Sep 16 '13 at 22:37
  • Have you seen this answer: http://stackoverflow.com/questions/3694060/how-to-make-google-fonts-work-in-ie – Matthew Riches Sep 24 '13 at 10:57

1 Answers1

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.

Robbert
  • 5,063
  • 6
  • 36
  • 44