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

And there is how it looks in chrome Chrome

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

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

有帮助吗?

解决方案

Problem solved by using as source ttf instead of otf format. Now customized font works fine.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top