Getting @font-face to work in IE 9

I have a page here

test1.singulink.com

Open in new window


The font face css is:

@font-face {
    font-family: "ColaborateLight";
    src: url("/Content/Fonts/ColabLig-webfont.eot");
    src: url("/Content/Fonts/ColabLig-webfont.eot?iefix") format("eot"),
         url("/Content/Fonts/ColabLig-webfont.woff") format("woff"),
         url("/Content/Fonts/ColabLig-webfont.ttf") format("truetype"),
         url("/Content/Fonts/ColabLig-webfont.svg#webfontR2xcGGVv") format("svg");
    font-weight: normal;
    font-style: normal;
 /* Example :{ font-family: "ColaborateLight", "Helvetica", "Arial", "Lucida Grande", "Gill Sans", "Verdana", sans-serif; font-size: 1.000em; } */
}

@font-face {
    font-family: "ColaborateRegular";
    src: url("/Content/Fonts/ColabReg-webfont.eot");
    src: url("/Content/Fonts/ColabReg-webfont.eot?iefix") format("eot"),
         url("/Content/Fonts/ColabReg-webfont.woff") format("woff"),
         url("/Content/Fonts/ColabReg-webfont.ttf") format("truetype"),
         url("/Content/Fonts/ColabReg-webfont.svg#webfontB6AeCMH3") format("svg");
    font-weight: normal;
    font-style: normal;
/* Example : { font-family: "ColaborateRegular", "Helvetica", "Arial", "Lucida Grande", "Gill Sans", "Verdana", sans-serif; font-size: 1.000em;} */
}

@font-face {
    font-family: "ColaborateMedium";
    src: url("/Content/Fonts/ColabMed-webfont.eot");
    src: url("/Content/Fonts/ColabMed-webfont.eot?iefix") format("eot"),
         url("/Content/Fonts/ColabMed-webfont.woff") format("woff"),
         url("/Content/Fonts/ColabMed-webfont.ttf") format("truetype"),
         url("/Content/Fonts/ColabMed-webfont.svg#webfontHpK4vQGz") format("svg");
    font-weight: normal;
    font-style: normal;
/* Example: { font-family: "ColaborateMedium", "Helvetica", "Arial", "Lucida Grande", "Gill Sans", "Verdana", sans-serif; font-size: 1.000em;} */
}

/* Body */
	body {
		background: #7A97B6;
		color: #333333;
		font: 100%/.5em "ColaborateLight", "Helvetica", Aria, "Lucida Grande", "Gill Sans", "Verdana", sans-serif;  
		line-height: 1.429;
		margin: 0px;
		padding: 0px;
		text-align: left;
	}

/* Headings */
h2 {font: 1.563em/.5em "ColaborateRegular", "Helvetica", Arial, "Lucida Grande", "Gill Sans", "Verdana", sans-serif; text-transform: uppercase; color:#395E77 }	/* 25px */
h3 {font: 1.25em/.5em "ColaborateMedium", "Helvetica", Arial, "Lucida Grande", "Gill Sans", "Verdana", sans-serif; color: #591992}	/* 20px */
h4 {font: 1.125em/.5em }	/* 18px */
h5 {font-size: 1em}	/* 16px */
h6 {font-size: 0.875em}	/* 14px */

Open in new window


The body font seems to show up correctly in IE 9, however none of the other font.   Ie 6 +, chrome and firefox all show the @font-face fonts fine, just IE9 doesn't show "ColaborateMedium" and "ColaborateRegular".  Any ideas?
leena42Asked:
Who is Participating?
 
leena42Author Commented:
Had to change the mime type for the font on IIS, it works now. :)
0
 
David S.Commented:
IE9 shows this error for all 3 custom fonts:

> CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.


Perhaps you'll find these helpful:
http://stackoverflow.com/questions/5587956/make-adobe-fonts-work-with-css3-font-face-in-ie9
http://stackoverflow.com/questions/5065362/ie9-blocks-download-of-cross-origin-web-font
0
 
RobOwner (Aidellio)Commented:
see here for Microsofts implementation of CSS with all versions of IE

http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#font

font-face: http://msdn.microsoft.com/library/ms530757.aspx
0
 
leena42Author Commented:
This was the solution
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.