I've stacked with problem which i can't understand. Trouble is that i use custom fonts on our corporate site and it works fine everywhere except IE.
Problem with IE you can see on a screenshot below: IE problem http://f.cl.ly/items/0k1T0R2u2i2L1C3L3u0o/Screen%20Shot%202013-07-23%20at%205.23.36%20PM.png
And there is how it looks in chrome Chrome http://f.cl.ly/items/3n022Q2a212V2T0m3Q0B/Screen%20Shot%202013-07-24%20at%2010.57.27%20AM.png
I'll try to explain... Fonts used for inputs and labels are the same. The problem is
that all stuff displaying as expected except cyrillic glyphs in <input/>
. So, what's wrong with
this font? How can i get back my cyrillic glyphs? I exactly know that they are present
in the font.
This font based on MyriadPro Light
font and edited using Glyphs.
You can download edited font to understand its structure.
UPD: Oh, i've forgot to say that this font was converted for Web through 2 different
converters (FontSquirrel and OnlineFontConverter), no luck. Maybe the problem is with those converters? Because i think, that this is problem of *.woff
format. Say, IE10 uses *.woff
files for @font-face
;
UPD2: Part of layout (html+css):
Html
<li class="f_name_wrapper aligned_left string input required stringish" id="order_tourists_attributes_0_name_input">
<label class=" label" for="order_tourists_attributes_0_name">
Имя по паспорту
</label>
<input class="input_text f_name" data-validator_string_ru="Заполняйте это поле как в заграничном паспорте" id="order_tourists_attributes_0_name" maxlength="30" name="order[tourists_attributes][0][name]" placeholder="Sherlock" type="text" validator="not_empty string_en">
</li>
Font-face:
@font-face {
font-family: "LT-Light";
src: url(/assets/LTLight-Regular.otf.eot);
src: url(/assets/LTLight-Regular.otf.eot?#iefix) format("embedded-opentype"),
url(/assets/LTLight-Regular.otf.woff) format("woff"),
url(/assets/LTLight-Regular.otf.ttf) format("truetype"),
url(/assets/LTLight-Regular.otf.svg#LTLightRegular) format("svg");
font-weight: normal;
font-style: normal;
}
CSS
#checkout_page .order_form .tourist ol li label {
font: 12px/12px "LT-Light";
text-transform: uppercase;
display: block;
padding: 0 5px 3px;
}
#checkout_page .order_form .tourist ol li input {
margin: 0;
padding: 0 10px;
border: 1px solid #B7B7B7;
border-radius: 3px;
height: 37px;
font: 18px/normal "LT-Light";
}
UPD 3: Problem again
Unfortunately problem is still here. Now there's trouble with another font: "Futura Round Regular". I use font converted using fontsquirell. You can see the effect on image below:
IE problem http://f.cl.ly/items/0L2X000n1L3N3K323w2m/Screen%20Shot%202013-09-16%20at%205.16.44%20PM.png
As you can see, part of string in input is cyrillic and it was displayed as 'Times New Roman', everything else displaying as expected. This problem occurs in IE8-10 with most cyrillic fonts. You can download fonts pack here