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%;}
}
Font face problem in IE 10
Moderator: General Moderators
- mecha_godzilla
- Forum Contributor
- Posts: 375
- Joined: Wed Apr 14, 2010 4:45 pm
- Location: UK
Re: Font face problem in IE 10
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:
I got this code from Font Squirrel I think 
HTH,
Mecha Godzilla
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;
}HTH,
Mecha Godzilla