[RESOLVED]How to get IE @Font-face to display like other browsers?

Hi

On www.orbisoft.com, Internet Explorer (all versions) seems to have not been displaying the Helvetica Light font like other web browsers such as Chrome and Firefox. I checked it on
www.netrenderer.com.

What changes would I need to make to the following CSS at
http://www.orbisoft.com/App_Themes/Theme1/StyleSheet.css
to enable this?

@font-face {
	font-family: 'HelveticaNeueLt';
	src: url('fonts/helveticaneuelt/helveticaneueltcom-lt.eot');
	src: url('fonts/helveticaneuelt/helveticaneueltcom-lt.eot?#iefix') format('embedded-opentype'),
			 url('fonts/helveticaneuelt/helveticaneueltcom-lt.woff') format('woff'),
			 url('fonts/helveticaneuelt/helveticaneueltcom-lt.ttf') format('truetype'),
			 url('fonts/helveticaneuelt/helveticaneueltcom-lt.svg#helveticaneueltcom-lt') format('svg');
	font-weight: normal;
	font-style: normal;
		}
@font-face {
	font-family: 'HelveticaNeueLTComBd';
	src: url('fonts/helveticaneueltcombd/helveticaneueltcom-bd.eot');
	src: url('fonts/helveticaneueltcombd/helveticaneueltcom-bd.eot?#iefix') format('embedded-opentype'),
			 url('fonts/helveticaneueltcombd/helveticaneueltcom-bd.woff') format('woff'),
			 url('fonts/helveticaneueltcombd/helveticaneueltcom-bd.ttf') format('truetype'),
			 url('fonts/helveticaneueltcombd/helveticaneueltcom-bd.svg#helveticaneueltcom-bd') format('svg');
	font-weight: normal;
	font-style: normal;
		}

Hi,

I tried your site with IE11, its showing:
font-family: "HelveticaNeueLt",Arial
in dev tools with font-size:12px
It looks good in IE than in FF.

I think problem is more with font-size than font-family.

So which is it using in IE11 for you, Helvetica or Arial?

Hi,

Yes its applying Arial font-family.

When i inspected in IE11, i see .woff file is not able to download.(404)

and i also got these errors in console:

CSS3111: @font-face encountered unknown error.
File: helveticaneueltcom-lt.eot

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
File: helveticaneueltcom-lt.ttf

Check this site may help u:

http://msdn.microsoft.com/en-in/library/ie/ms530757%28v=vs.85%29.aspx

Thanks.

I think it might have to do with declaring the MIME types in the Web.Config file.

If anyone knows what I should put there to match the CSS in the original post I would be appreciative.

TIA

Mark

It’s a know problem that IE choose to render the fonts differently than in other browsers. You can play around with
letter-spacing to make it look similar but I wouldn’t personally bother. It’s the way IE renders the font.

Leave a Reply