Page 1 of 1

Font face problem in IE 10

Posted: Tue Jun 04, 2013 11:58 pm
by dt22
Hi All,

Am trying to figure out a problem. Am trying to embedded a font in a website. Its is working very well in all all browsers except IE 10. Only the IE 10 showing the font larger in size than my need.

Am not sure what is the reason.. is the IE 10 not supporting the font face. or is anything else. Please advice me. Am in a big Mess. I tried different css for ie also but still its not happening.

Here is my code:
@media (min-width: 1200px){
@font-face {
font-family:Meera;
src:
url(../Meera_04-2.ttf);

}
body { font-size:15px;}
}
@media screen and (min-width:0\0) {
@font-face {
font-family:Meera;
src:
url(../Meera_04-2.ttf),url(../Meera_04-2.eot);

}
body { background: orange; font-size:25%;}
}

Re: Font face problem in IE 10

Posted: Wed Jun 05, 2013 7:59 pm
by mecha_godzilla
Hi,

According to the following page, the workaround you're using should apply equally to IE9 and IE10:

http://blog.keithclark.co.uk/wp-content ... -tests.php

There is also an IE10-specific hack, mentioned on this page:

http://www.impressivewebs.com/ie10-css-hacks/

I use NetRenderer to test my pages and haven't noticed any difference in font sizing when using web fonts in IE8, 9 or 10 - the fonts seem slightly wider in IE9 and 10, but they are still the same height and I do not do have any special workarounds for IE in my style sheets.

I've just noticed in your code that you have two different versions of the font specified in your IE9-10 styles. Is this correct? I would have thought that you would only need to specify the version that IE supports. I don't know whether this will be of any use or not, but the web font definitions in my stylesheets look like this:

Code: Select all

@font-face {
font-family: 'AmaticSCRegular';
src: url('AmaticSC-Regular-webfont.eot');
src: url('AmaticSC-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('AmaticSC-Regular-webfont.woff') format('woff'),
url('AmaticSC-Regular-webfont.ttf') format('truetype'),
url('AmaticSC-Regular-webfont.svg#AmaticSCRegular') format('svg');
font-style: normal;
font-weight: normal;
}
I got this code from Font Squirrel I think :mrgreen:

HTH,

Mecha Godzilla