1

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

Community
  • 1
  • 1
nick.skriabin
  • 873
  • 2
  • 11
  • 27
  • Are you talking about the 'M'? The rest looks pretty much cyrillic to me. Also how did you modify the font? Did you use the proper unicode character codes? – Mario Jul 23 '13 at 13:57
  • Yeah, it's cyrillic, but font-family's wrong. You can see, say, the difference between numbers and cyrillic letters. My modifications were very simple, i've just removed some unnecessary glyphs. All cyrillic and latin letters are present in this font. – nick.skriabin Jul 23 '13 at 14:02
  • And, of course, in all other browsers font works normally. – nick.skriabin Jul 23 '13 at 14:03
  • Where's your HTML and CSS? – EricLaw Jul 23 '13 at 17:28
  • I don't really think that the problem is with css or html, but there's it, see **UPD2** for layout. – nick.skriabin Jul 24 '13 at 06:53

1 Answers1

0

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

nick.skriabin
  • 873
  • 2
  • 11
  • 27